/* tokens.css — ui-landing-saas · THE token contract (theme: default)
 * ---------------------------------------------------------------------------
 * The ONLY file (with an optional theme.css) that may contain raw colour values,
 * font stacks, radii, durations or easings. Components (saas-starter.css, your
 * app CSS, a React app) reference tokens by name and never branch on scheme.
 *
 * Scheme model: every colour is written ONCE as light-dark(light, dark).
 *   :root                    color-scheme: light dark  → follows the OS
 *   html[data-theme="light"] color-scheme: light       → pinned light
 *   html[data-theme="dark"]  color-scheme: dark        → pinned dark
 * Baseline: light-dark() is supported by every evergreen browser since 2024.
 * Older engines ignore the light-dark() declarations and receive the plain
 * light fallbacks in the @supports-not block at the bottom.
 *
 * Sources (2026-10-31): light = ui-landing-workspace (Google greys, measured
 * from workspace.google.com) with a brand-neutral blue accent; dark =
 * ui-landing-product (Apple neutrals on a three-step black stage, measured from
 * screen.studio). Contrast ratios (WCAG 2.x relative luminance) are noted per
 * text token as light / dark against --surface-canvas; AA = 4.5:1 text, 3:1
 * large text and UI strokes. scripts/check-page.py recomputes them.
 *
 * Load order:  tokens.css  →  [theme.css]  →  styles.css
 * Fonts: system stacks only. Self-hosted woff2 is the named deviation. Never a CDN.
 */

:root {
  color-scheme: light dark;

  /* ---- surfaces ---- */
  --surface-canvas: light-dark(#ffffff, #000000);          /* <body>, hero */
  --surface-section: light-dark(#f8f9fa, #111112);         /* alternate sections, footer */
  --surface-raised: light-dark(#ffffff, #1b1b1d);          /* cards, plans, quotes, inputs */
  --surface-raised-hover: light-dark(#f1f3f4, #222224);
  --surface-tint: light-dark(#e8effd, #1a1f33);            /* accent container: badges, callouts */
  --surface-glass: light-dark(rgba(255, 255, 255, 0.78), rgba(22, 22, 23, 0.8));
  --surface-glass-solid: light-dark(#ffffff, #161617);     /* reduced-transparency fallback */
  --surface-media: light-dark(#f1f3f4, #0b0b0d);           /* media frames */
  --glass-filter: saturate(180%) blur(16px);

  /* ---- text ---- */
  --text-emphasis: light-dark(#202124, #f5f5f7);           /* headings, leads        16.1 / 19.3 */
  --text: light-dark(#3c4043, #d0d0d4);                    /* body, nav              10.5 / 13.5 */
  --text-muted: light-dark(#5f6368, #9a9aa0);              /* lede, captions          6.1 /  7.3 */
  --text-subtle: light-dark(#80868b, #6e6e73);             /* placeholders, fine print 3.7 / 4.1 — decorative only, never essential */
  --on-accent: light-dark(#ffffff, #0b1020);               /* label on a filled accent button */

  /* ---- the ONE accent: CTA, link, eyebrow, focus. Brand-neutral blue; swap the four
   *      values for a brand and re-run check-page.py ---- */
  --accent: light-dark(#1d4ed8, #8fb3ff);                  /* fill / link            white-on 6.6 / ink-on 10.9; on canvas 6.3 / 9.7 */
  --accent-hover: light-dark(#1e40af, #a9c4ff);
  --accent-pressed: light-dark(#1e3a8a, #c2d5ff);
  --accent-text: light-dark(#1d4ed8, #8fb3ff);             /* eyebrows and inline links (same hue; alias so HUD can split them) */
  --accent-ring: light-dark(rgba(29, 78, 216, 0.28), rgba(143, 179, 255, 0.35));
  --accent-glow: light-dark(rgba(29, 78, 216, 0.14), rgba(143, 179, 255, 0.18));

  /* ---- semantic status: green = savings / included, red = error. Nothing else is coloured. ---- */
  --positive: light-dark(#137333, #6ddc8a);                /* "Save 16%"             6.0 / 11.2; on --positive-container 5.2 / 8.6 */
  --positive-container: light-dark(#e6f4ea, #0f2e1a);
  --negative: light-dark(#d93025, #ff8a80);                /* validation only         4.8 /  9.0 */
  --negative-container: light-dark(#fce8e6, #3a1210);

  /* ---- strokes: hairlines, never heavy borders ---- */
  --stroke: light-dark(#dadce0, rgba(255, 255, 255, 0.1));
  --stroke-soft: light-dark(#e8eaed, rgba(255, 255, 255, 0.06));
  --stroke-strong: light-dark(#c4c7cc, rgba(255, 255, 255, 0.18));
  --focus-ring: var(--accent);

  /* ---- shadows: only on things that float ---- */
  --shadow-1: light-dark(0 1px 2px rgba(60, 64, 67, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5));
  --shadow-2: light-dark(0 4px 16px rgba(60, 64, 67, 0.12), 0 12px 32px rgba(0, 0, 0, 0.5));
  --shadow-media: light-dark(0 0 0 1px #dadce0, 0 0 0 1px rgba(255, 255, 255, 0.08)), light-dark(0 24px 60px rgba(60, 64, 67, 0.16), 0 30px 80px rgba(0, 0, 0, 0.6));
  --shadow-plan: 0 0 0 1px var(--accent), 0 10px 30px var(--accent-glow);

  /* ---- shape ---- */
  --radius-s: 6px;                      /* chips, small buttons, inputs */
  --radius-m: 10px;                     /* buttons */
  --radius-l: 18px;                     /* cards, plans, quotes, media frames */
  --radius-pill: 999px;

  /* ---- type: system first; weights 400 / 500 / 600 only (700 nowhere) ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --tracking-display: -0.02em;
  --tracking-control: -0.01em;
  --tracking-eyebrow: 0.02em;

  /* font shorthand = weight size/line-height family. Fluid between 390 and 1440 px. */
  --type-display: 600 clamp(40px, 2.2rem + 2.6vw, 72px) / 1.05 var(--font-sans);   /* the one hero h1 */
  --type-h1: 600 clamp(32px, 1.6rem + 1.8vw, 52px) / 1.1 var(--font-sans);          /* section headlines, CTA band */
  --type-h2: 600 clamp(24px, 1.2rem + 1vw, 34px) / 1.2 var(--font-sans);            /* feature headlines, plan price */
  --type-h3: 600 clamp(18px, 1rem + 0.4vw, 21px) / 1.3 var(--font-sans);            /* card and plan titles */
  --type-lede: 400 clamp(17px, 1rem + 0.35vw, 21px) / 1.45 var(--font-sans);        /* hero lede, section ledes (in --text-muted) */
  --type-body: 400 17px / 1.5 var(--font-sans);
  --type-body-sm: 400 15px / 1.5 var(--font-sans);                                   /* card body, plan rows */
  --type-control: 500 15px / 1.2 var(--font-sans);                                   /* buttons, nav */
  --type-eyebrow: 600 13px / 1.4 var(--font-sans);                                   /* uppercase, tracked, in --accent-text */
  --type-caption: 400 13px / 1.45 var(--font-sans);                                  /* fine print, footer (never below 12px) */
  --type-price: 600 clamp(36px, 1.6rem + 1.4vw, 48px) / 1 var(--font-sans);

  /* ---- layout rhythm: 4-px grid ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --max-w: 1200px;                      /* content width */
  --copy-max: 68ch;                     /* a centred headline + lede */
  --gutter: clamp(16px, 4vw, 40px);
  --section-pad: clamp(64px, 6vw + 24px, 112px);
  --header-h: 64px;
  --control-h: 44px;                    /* minimum tap target */
  --control-h-lg: 52px;

  /* ---- motion: short, standard, zeroed when the user asks ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---- scheme pinning (the toggle writes data-theme on <html>) ---- */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* ---- motion off ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* ---- glass off: opaque surfaces replace blur ---- */
@media (prefers-reduced-transparency: reduce) {
  :root { --surface-glass: var(--surface-glass-solid); --glass-filter: none; }
}

/* ---- engines without light-dark(): a readable light page, nothing fancy ---- */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light;
    --surface-canvas: #ffffff; --surface-section: #f8f9fa; --surface-raised: #ffffff;
    --surface-raised-hover: #f1f3f4; --surface-tint: #e8effd; --surface-glass: #ffffff;
    --surface-glass-solid: #ffffff; --surface-media: #f1f3f4;
    --text-emphasis: #202124; --text: #3c4043; --text-muted: #5f6368; --text-subtle: #80868b; --on-accent: #ffffff;
    --accent: #1d4ed8; --accent-hover: #1e40af; --accent-pressed: #1e3a8a; --accent-text: #1d4ed8;
    --accent-ring: rgba(29, 78, 216, 0.28); --accent-glow: rgba(29, 78, 216, 0.14);
    --positive: #137333; --positive-container: #e6f4ea; --negative: #d93025; --negative-container: #fce8e6;
    --stroke: #dadce0; --stroke-soft: #e8eaed; --stroke-strong: #c4c7cc;
    --shadow-1: 0 1px 2px rgba(60, 64, 67, 0.2); --shadow-2: 0 4px 16px rgba(60, 64, 67, 0.12);
    --shadow-media: 0 0 0 1px #dadce0, 0 24px 60px rgba(60, 64, 67, 0.16);
  }
}