/* ============================================================================ MLH Client Portal — Design Tokens (single source of truth for all color) ---------------------------------------------------------------------------- Source : Linear's canonical DESIGN.md, dropped by the official getdesign CLI (`npx getdesign@latest add linear.app` → /linear.app/DESIGN.md, also copied verbatim to /DESIGN.md). Every COLOR value below is copied VERBATIM from that file's `colors:` front-matter — not hand-edited, recolored, or "improved". Theme : DARK-FIRST. :root is Linear's native dark canvas. Light mode is derived from Linear's inverse-* tokens and is opt-in via . Type : Inter Tight (display) · Inter (body) · JetBrains Mono (mono) — the documented free substitutes for Linear Display/Text/Mono. EB Garamond retained as --font-editorial for public/courtship pages (Apple treatment). Responsive type scale kept (clamp-based). Compat : Legacy aliases (--paper/--ink/--gold/--accent/…) are preserved so the existing 47 consuming files keep working; they resolve to the canonical tokens (so they follow the active theme). Export : /shared/tokens.json · Spec: /DESIGN.md · Issue #33 / #32 ========================================================================= */ /* --------------------------------------------------------------------------- 1 · DARK-FIRST (default) — VERBATIM Linear canonical tokens ------------------------------------------------------------------------ */ :root, [data-theme="dark"] { color-scheme: dark; /* Brand accent — scarce: brand mark / CTA / focus ring / links only. NOTE: --color-accent #5e6ad2 on --color-canvas #010102 = 4.44:1 — just below the 4.5:1 AA threshold for small body text (inherent to Linear's palette). Use the accent for large/decorative text, icons, and fills (white-on-accent passes); set small body copy in --color-fg, not accent. */ --color-accent: #5e6ad2; /* colors.primary */ --color-accent-hover: #828fff; /* colors.primary-hover */ --color-accent-focus: #5e69d1; /* colors.primary-focus */ --color-on-accent: #ffffff; /* colors.on-primary */ --color-brand-secure: #7a7fad; /* colors.brand-secure */ /* Surface ladder */ --color-canvas: #010102; /* colors.canvas */ --color-surface-1: #0f1011; /* colors.surface-1 */ --color-surface-2: #141516; /* colors.surface-2 */ --color-surface-3: #18191a; /* colors.surface-3 */ --color-surface-4: #191a1b; /* colors.surface-4 */ /* Text ladder */ --color-fg: #f7f8f8; /* colors.ink */ --color-fg-muted: #d0d6e0; /* colors.ink-muted */ --color-fg-subtle: #8a8f98; /* colors.ink-subtle */ --color-fg-tertiary: #62666d; /* colors.ink-tertiary */ /* Hairlines */ --color-hairline: #23252a; /* colors.hairline */ --color-hairline-strong: #34343a; /* colors.hairline-strong */ --color-hairline-tertiary: #3e3e44; /* colors.hairline-tertiary */ /* Semantic — success is the ONLY semantic color in Linear's system */ --color-success: #27a644; /* colors.semantic-success */ --color-overlay: #000000; /* colors.semantic-overlay */ /* Focus ring tint (from primary-focus) */ --color-focus-ring: rgba(94, 105, 209, 0.65); /* Elevation — Linear leans on the surface ladder + hairlines, not shadow */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.50); --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.60); } /* --------------------------------------------------------------------------- 2 · LIGHT (opt-in: ) Derived from Linear's inverse-* tokens; ink/hairlines stepped from #000000. ------------------------------------------------------------------------ */ [data-theme="light"] { color-scheme: light; /* Accent is unchanged across themes (Linear keeps one indigo) */ --color-accent: #5e6ad2; --color-accent-hover: #828fff; --color-accent-focus: #5e69d1; --color-on-accent: #ffffff; --color-brand-secure: #7a7fad; /* Surfaces — from inverse-canvas / inverse-surface-1 / inverse-surface-2 */ --color-canvas: #ffffff; /* colors.inverse-canvas */ --color-surface-1: #f5f6f6; /* colors.inverse-surface-1 */ --color-surface-2: #f6f7f7; /* colors.inverse-surface-2 */ --color-surface-3: #eceef0; /* derived next step */ --color-surface-4: #e3e5e8; /* derived next step */ /* Text — from inverse-ink #000000, stepped */ --color-fg: #000000; /* colors.inverse-ink */ --color-fg-muted: #3b3e44; /* derived */ --color-fg-subtle: #62666d; /* reuse ink-tertiary — AA on white */ --color-fg-tertiary: #8a8f98; /* reuse ink-subtle */ /* Hairlines — stepped from inverse-ink */ --color-hairline: rgba(0, 0, 0, 0.10); --color-hairline-strong: rgba(0, 0, 0, 0.16); --color-hairline-tertiary: rgba(0, 0, 0, 0.22); --color-success: #27a644; --color-overlay: #000000; --color-focus-ring: rgba(94, 105, 209, 0.55); --shadow-1: 0 1px 2px rgba(8, 9, 10, 0.06), 0 1px 1px rgba(8, 9, 10, 0.04); --shadow-2: 0 4px 12px rgba(8, 9, 10, 0.08), 0 1px 2px rgba(8, 9, 10, 0.05); --shadow-3: 0 12px 32px rgba(8, 9, 10, 0.12), 0 2px 6px rgba(8, 9, 10, 0.06); } /* --------------------------------------------------------------------------- 3 · LEGACY ALIASES (kept so the existing 47 files keep working) They resolve to the canonical tokens and therefore follow the active theme. Defined for both themes so the mapping is explicit. ------------------------------------------------------------------------ */ :root, [data-theme="dark"], [data-theme="light"] { --paper: var(--color-canvas); --paper-warm: var(--color-surface-2); --paper-table: var(--color-surface-2); --ink: var(--color-fg); --ink-deep: var(--color-fg); --dark: var(--color-surface-3); --subtle: var(--color-fg-subtle); --light: var(--color-fg-tertiary); --white: #ffffff; --navy: var(--color-canvas); --accent: var(--color-accent); /* legacy gold hook → Linear indigo */ --gold: var(--color-accent); --gold-bright: var(--color-accent-hover); --bronze: var(--color-accent); --brown: var(--color-fg-muted); --brown-soft: var(--color-fg-subtle); --rule: var(--color-hairline); --rule-strong: var(--color-hairline-strong); } /* --------------------------------------------------------------------------- 4 · TYPOGRAPHY (locked fonts + responsive scale) Sizes use clamp() for the project's responsive scale; weights + tracking follow Linear's hierarchy (negative tracking on display, positive eyebrow). ------------------------------------------------------------------------ */ :root { --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-editorial: 'EB Garamond', Georgia, 'Times New Roman', serif; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --text-display-xl: 600 clamp(2.75rem, 6vw, 5rem)/1.05 var(--font-display); --text-display-lg: 600 clamp(2.25rem, 4.5vw, 3.5rem)/1.10 var(--font-display); --text-display-md: 600 clamp(1.75rem, 3.2vw, 2.5rem)/1.15 var(--font-display); --text-headline: 600 clamp(1.5rem, 2.4vw, 1.75rem)/1.20 var(--font-display); --text-card-title: 500 1.375rem/1.25 var(--font-display); --text-subhead: 400 1.25rem/1.40 var(--font-display); --text-body-lg: 400 1.125rem/1.50 var(--font-body); --text-body: 400 1rem/1.50 var(--font-body); --text-body-sm: 400 0.875rem/1.50 var(--font-body); --text-caption: 400 0.75rem/1.40 var(--font-body); --text-button: 500 0.875rem/1.20 var(--font-body); --text-eyebrow: 500 0.8125rem/1.30 var(--font-mono); /* 13px — Linear eyebrow */ --text-mono: 400 0.8125rem/1.50 var(--font-mono); --tracking-display: -0.04em; /* Linear's aggressive negative on display */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-eyebrow: 0.4px; /* Linear eyebrow tracking is +0.4px */ } /* --------------------------------------------------------------------------- 5 · SPACE · RADIUS · MOTION · Z (verbatim Linear scale, 4px base) ------------------------------------------------------------------------ */ :root { --space-0: 0; --space-1: 0.25rem; /* 4 · spacing.xxs */ --space-2: 0.5rem; /* 8 · spacing.xs */ --space-3: 0.75rem; /* 12 · spacing.sm */ --space-4: 1rem; /* 16 · spacing.md */ --space-5: 1.5rem; /* 24 · spacing.lg */ --space-6: 2rem; /* 32 · spacing.xl */ --space-7: 3rem; /* 48 · spacing.xxl */ --space-9: 6rem; /* 96 · spacing.section */ --space-8: 4rem; --space-10: 8rem; --radius-xs: 4px; /* rounded.xs — chips, badges */ --radius-sm: 6px; /* rounded.sm */ --radius-md: 8px; /* rounded.md — buttons, inputs */ --radius-lg: 12px; /* rounded.lg — cards */ --radius-xl: 16px; /* rounded.xl — product/photo panels */ --radius-2xl: 24px; /* rounded.xxl */ --radius-pill: 9999px; --radius-full: 9999px; --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --z-base: 0; --z-raised: 10; --z-nav: 50; --z-overlay:100; --z-modal: 200; --z-toast: 300; --touch-min: 44px; /* Responsive breakpoints (reference export — media queries can't read vars) */ --bp-sm: 360px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; --outer: clamp(1.25rem, 5vw, 5rem); --section: clamp(48px, 6vw, 96px); --topbar-h: 56px; --container-max: 1280px; } /* --------------------------------------------------------------------------- 6 · Reduced motion ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }