/* ============================================================ SYSDOM DESIGN TOKENS · v2.1 · July 2026 Single source of truth for color, type, space, radius, motion. TYPE & PALETTE: adopted from the Platform system — · Inter Display everywhere, tight -0.05em tracking, weight 500 · warm-neutral surfaces + text ramp BRAND OVERRIDE: the one thing kept from Sysdom is the accent, #FB6907 (replaces Platform's #fa6e43). Everything orange = #FB6907. THEME Dark is Platform's real look (bg #161719). Light is its inverse. Default follows the OS; theme-toggle.js writes [data-theme] and remembers the choice. or FONT Inter Display via rsms.me/inter (optical-sizing OFF on display). ============================================================ */ :root { /* ---- BRAND (the only Sysdom carry-over) ---------------- */ --fire: #FB6907; /* brand accent — every orange in the system */ --fire-strong: #B8490A; /* small dense text on light — stronger contrast */ --fire-amber: #FFA23C; /* gradient start / warm highlight */ --ember: #E2350F; /* gradient end */ --fire-grad: linear-gradient(100deg, #FFA23C, #FB6907 52%, #E2350F); --on-accent: #161719; /* text/icon sitting ON the accent — Platform-dark */ --black: #000000; /* pure-black attention frames, both themes */ /* ---- ENGINE & DRIVER PALETTE (functional, kept) -------- */ /* Semantic coding for SIM figures & decks — orthogonal to the Platform neutral/accent adoption. Resolves per-theme. */ --product: #1A6DFF; --product-tint: rgba(26,109,255,.12); --customer: #12925A; --customer-tint: rgba(18,146,90,.12); --cash: #E0322F; --cash-tint: rgba(224,50,47,.12); --skills: #D9A404; --skills-tint: rgba(217,164,4,.12); --driver: #6E56CF; --driver-tint: rgba(110,86,207,.12); --product-bright:#4F97FF; --customer-bright:#34C759; --cash-bright:#FF453A; --skills-bright:#FF9F0A; --driver-bright:#A78BFA; /* ---- NEUTRALS · LIGHT (cool blue-grey — the Swiss base) - */ --paper: #F5F5F7; /* page background */ --surface: #FFFFFF; /* cards, raised surfaces */ --surface-2: #EDEFF2; /* raised / alt rows */ --surface-3: #E2E6EA; /* deepest raise, wells */ --hairline: #D8DEE3; /* 1px dividers & borders */ --hairline-2:#C7CED4; /* stronger borders */ --ink: #1A1A1C; /* primary text */ --ink-dim: #707E89; /* secondary text (blue-grey) */ --ink-faint: #8B98A3; /* muted labels, meta */ /* ---- SEMANTIC ALIASES ---------------------------------- */ --bg: var(--paper); --fg: var(--ink); --fg-muted: var(--ink-dim); --border: var(--hairline); --accent: var(--fire); --accent-text: var(--fire-strong); --selection: rgba(251,105,7,.22); /* ---- TYPE FAMILIES (Platform: one family, everywhere) -- */ --font-display: 'InterDisplay','Inter Display','Inter',system-ui,sans-serif; --font-body: 'InterDisplay','Inter Display','Inter',system-ui,sans-serif; /* ---- TYPE SCALE — Platform (size / lh / tracking / wt) -- */ /* Display — Inter Display 500, optical-sizing:none, near-1.0 lh */ --t-display-size: clamp(56px, 8vw, 96px); --t-display-lh: 0.9; --t-display-ls: -0.05em; --t-display-wt: 600; /* the ONLY 600 — hero display type only */ /* H1 */ --t-h1-size: clamp(40px, 5.2vw, 72px); --t-h1-lh: 1.02; --t-h1-ls: -0.045em; --t-h1-wt: 500; /* H2 */ --t-h2-size: clamp(28px, 3.3vw, 48px); --t-h2-lh: 1.1; --t-h2-ls: -0.04em; --t-h2-wt: 500; /* H3 */ --t-h3-size: 28px; --t-h3-lh: 1.2; --t-h3-ls: -0.04em; --t-h3-wt: 500; /* Title / component heading */ --t-title-size: 24px; --t-title-lh: 1.35; --t-title-ls: -0.03em; --t-title-wt: 500; /* Body large */ --t-bodyL-size: 21px; --t-bodyL-lh: 1.4; --t-bodyL-ls: -0.03em; --t-bodyL-wt: 400; /* Body */ --t-body-size: 17px; --t-body-lh: 1.5; --t-body-ls: -0.02em; --t-body-wt: 400; /* Caption / small */ --t-caption-size: 14px; --t-caption-lh: 1.5; --t-caption-ls: -0.02em; --t-caption-wt: 400; /* Eyebrow / kicker — uppercase, tracked (legibility needs positive) */ --t-eyebrow-size: 13px; --t-eyebrow-ls: 0.2em; --t-eyebrow-wt: 500; /* ---- SPACE SCALE (4-based) ----------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 44px; --space-9: 64px; --space-10: 88px; --space-11: 120px; /* ---- LAYOUT -------------------------------------------- */ --container: 1180px; --page-x: 48px; --section-y: 88px; /* ---- RADII (Platform: 8 cards / 12 buttons / 4 chips) --- */ --radius-pill: 999px; --radius-lg: 16px; --radius-md: 12px; /* buttons */ --radius-sm: 8px; /* cards */ --radius-xs: 4px; /* chips, tags */ /* ---- STROKES & SHADOWS --------------------------------- */ --border-w: 1px; --figure-stroke: 1.5px; --shadow-none: none; --shadow-card: 0 1px 2px rgba(16,24,40,.05); /* ---- MOTION -------------------------------------------- */ --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 320ms; color-scheme: light; } /* ============================================================ DARK THEME · Platform's real look ============================================================ */ [data-theme="dark"] { --paper: #0E0F12; /* cool near-black (blue-grey) */ --surface: #16181C; /* cards */ --surface-2: #1D2024; /* raised */ --surface-3: #262A2F; /* deepest raise, wells, avatars */ --hairline: #2A2E34; /* subtle dividers */ --hairline-2:#3A3F47; /* stronger borders */ --ink: #F4F6F8; /* cool white primary */ --ink-dim: #9BA3AE; /* blue-grey secondary */ --ink-faint: #6C7480; /* blue-grey muted */ --accent-text: var(--fire); /* #FB6907 pops on #161719 */ --selection: rgba(251,105,7,.35); --product: #4F97FF; --product-tint: rgba(79,151,255,.16); --customer: #34C759; --customer-tint: rgba(52,199,89,.16); --cash: #FF453A; --cash-tint: rgba(255,69,58,.16); --skills: #FF9F0A; --skills-tint: rgba(255,159,10,.16); --driver: #A78BFA; --driver-tint: rgba(167,139,250,.18); --shadow-card: 0 1px 2px rgba(0,0,0,.5); color-scheme: dark; } /* Follow OS on first paint until a choice is stored */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --paper:#0E0F12; --surface:#16181C; --surface-2:#1D2024; --surface-3:#262A2F; --hairline:#2A2E34; --hairline-2:#3A3F47; --ink:#F4F6F8; --ink-dim:#9BA3AE; --ink-faint:#6C7480; --accent-text:var(--fire); --selection:rgba(251,105,7,.35); --product:#4F97FF; --customer:#34C759; --cash:#FF453A; --skills:#FF9F0A; --driver:#A78BFA; color-scheme: dark; } } /* ---- OPTIONAL BASE HELPERS -------------------------------- */ ::selection { background: var(--selection); } .ds-eyebrow { font-family: var(--font-body); font-weight: var(--t-eyebrow-wt); font-size: var(--t-eyebrow-size); letter-spacing: var(--t-eyebrow-ls); text-transform: uppercase; color: var(--accent); } .ds-display { font-family: var(--font-display); font-optical-sizing: none; font-weight: var(--t-display-wt); font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); color: var(--fg); } .ds-h1 { font-family:var(--font-display); font-optical-sizing:none; font-weight:var(--t-h1-wt); font-size:var(--t-h1-size); line-height:var(--t-h1-lh); letter-spacing:var(--t-h1-ls); color:var(--fg); } .ds-h2 { font-family:var(--font-display); font-optical-sizing:none; font-weight:var(--t-h2-wt); font-size:var(--t-h2-size); line-height:var(--t-h2-lh); letter-spacing:var(--t-h2-ls); color:var(--fg); } .ds-body { font-family:var(--font-body); font-weight:var(--t-body-wt); font-size:var(--t-body-size); line-height:var(--t-body-lh); letter-spacing:var(--t-body-ls); color:var(--fg-muted); }