/* ========================================================================== Chikane Labs brand design tokens v0.1 (2026-07-15) [COPY for the portal; the master lives at brand/tokens.css; keep in sync] Evolves the shipped product palette (dark slate + sky) into a small brand system for the marketing site and portal chrome. Usage: - Dark is the default theme (matches the product). - Light mode: - Accent options: default = SKY (product continuity); = SIGNAL ORANGE (racing / hazard-marking energy). Pick ONE per surface; both sets are defined so the founder can compare. - Logo SVGs read --brand-accent and fall back to sky if it is unset; set --brand-accent: currentColor for monochrome marks. ========================================================================== */ :root { /* ---- Core neutrals (dark, identical to the product UI today) -------- */ --bg: #0f172a; /* page background */ --surface: #1e293b; /* cards, panels */ --surface-raised: #273449; /* hover / raised cards */ --line: #334155; /* hairlines, borders */ --text: #e2e8f0; /* primary text */ --text-dim: #94a3b8; /* secondary text, captions */ /* ---- Brand anchors (theme-independent) -------------------------------- */ --ink: #0f172a; /* brand "black": mark/text on light bg */ --paper: #f8fafc; /* brand "white": mark/text on dark bg */ /* ---- Status (unchanged from product) ---------------------------------- */ --ok: #4ade80; --warn: #fbbf24; --err: #f87171; /* ---- Accent set A: SKY (default) -------------------------------------- */ --brand-accent: #38bdf8; /* strokes, links, marks */ --brand-accent-strong: #0ea5e9; /* buttons, hover */ --brand-accent-soft: rgba(56, 189, 248, 0.14); /* tints, selected rows */ --brand-on-accent: #082f49; /* text on accent fills */ /* ---- Type -------------------------------------------------------------- */ --font-sans: system-ui, -apple-system, "Segoe UI", Inter, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; /* Marketing-site scale */ --fs-display: clamp(2.5rem, 1.5rem + 4vw, 4.25rem); --fs-h1: 2.25rem; --fs-h2: 1.5rem; --fs-body: 1rem; --fs-small: 0.875rem; --lh-display: 1.05; --lh-heading: 1.2; --lh-body: 1.6; --fw-display: 800; --fw-heading: 700; --fw-body: 400; --ls-display: -0.02em; /* tighten big type */ --ls-caps: 0.14em; /* CHIKANE-style spaced caps */ /* ---- Spacing (4px base) ------------------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* ---- Radius ------------------------------------------------------------ */ --radius-sm: 4px; /* inputs, chips */ --radius-md: 8px; /* buttons, small cards */ --radius-lg: 14px; /* cards, modals */ --radius-full: 999px; /* pills, avatars */ } /* ---- Accent set B: SIGNAL ORANGE (racing / industrial-marking energy) --- */ [data-accent="signal"] { --brand-accent: #fb923c; --brand-accent-strong: #f97316; --brand-accent-soft: rgba(251, 146, 60, 0.14); --brand-on-accent: #431407; } /* ---- Light mode ---------------------------------------------------------- */ [data-theme="light"] { --bg: #f8fafc; --surface: #ffffff; --surface-raised: #f1f5f9; --line: #e2e8f0; --text: #0f172a; --text-dim: #475569; /* darker accent steps for contrast on light backgrounds */ --brand-accent: #0284c7; --brand-accent-strong: #0369a1; --brand-accent-soft: rgba(2, 132, 199, 0.10); --brand-on-accent: #ffffff; } [data-theme="light"][data-accent="signal"], [data-accent="signal"] [data-theme="light"] { --brand-accent: #ea580c; --brand-accent-strong: #c2410c; --brand-accent-soft: rgba(234, 88, 12, 0.10); --brand-on-accent: #ffffff; }