/* GENERATED from brands/lite-computer/brand.json. Do not edit by hand.
   Source of truth: Lite-Computer-Brand-Guide-Holistic-V1pt1-2026-08-27.md
   Regenerate: node build/tokens.mjs lite-computer */

:root {
  --color-bg: #FAFAF8;
  --color-surface: #F4F2EE;
  --color-ink: #141414;
  --color-accent: #B8914A;
  --color-accent-light: #E8D9BB;
  --color-accent-text: #6B5326;
  --color-mute: rgba(20, 20, 20, 0.60);
  --color-rule: rgba(20, 20, 20, 0.12);

  --text-display: 96px;
  --leading-display: 0.95;
  --tracking-display: -0.018em;
  --text-headline: 56px;
  --leading-headline: 1.05;
  --tracking-headline: -0.012em;
  --text-subhead: 32px;
  --leading-subhead: 1.2;
  --tracking-subhead: -0.008em;
  --text-body: 18px;
  --leading-body: 1.55;
  --text-ui: 14px;
  --leading-ui: 1.5;
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.14em;

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --measure: 72ch;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-12: 96px;

  --duration-quick: 120ms;
  --ease-quick: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-standard: 180ms;
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-considered: 240ms;
  --ease-considered: cubic-bezier(0.5, 0, 0, 1);

  /* The film's bezel. It is a token because it must flip: near-black on the
     cream page, and a lighter grey in dark mode, where near-black would
     disappear into the #1C1B18 ground exactly as the unframed player
     disappeared into the cream one. */
  --film-bezel: #17181A;

  --radius-card: 10px;
  --radius-control: 6px;
  --hairline: 1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1C1B18;
    --color-surface: #141414;
    --color-ink: #FAFAF8;
    --color-accent: #B8914A;
    --color-accent-light: #E8D9BB;
    --color-accent-text: #B8914A;
    --color-mute: rgba(250, 250, 248, 0.60);
    --color-rule: rgba(250, 250, 248, 0.10);
    --film-bezel: #3D3C36;
  }
}

[data-theme="dark"] {
  --color-bg: #1C1B18;
  --color-surface: #141414;
  --color-ink: #FAFAF8;
  --color-accent: #B8914A;
  --color-accent-light: #E8D9BB;
  --color-accent-text: #B8914A;
  --color-mute: rgba(250, 250, 248, 0.60);
  --color-rule: rgba(250, 250, 248, 0.10);
  --film-bezel: #3D3C36;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-quick: 0ms;
    --duration-standard: 0ms;
    --duration-considered: 0ms;
  }
}