/*
 * tokens.css — direction D "Mayordomo · Consola" (ADR-0009, .impeccable.md).
 *
 * Every color is one light-dark() pair, so a theme is a color-scheme, never a
 * second block of values: :root follows the system, and [data-theme] pins any
 * subtree to one theme (the styleguide renders both side by side this way).
 * Components consume these semantic tokens only.
 */

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/Geist-Variable-b3bdf954.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/GeistMono-Variable-0c711437.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* ---------- Surfaces ---------- */
  --bg: light-dark(oklch(96.8% 0.004 250deg), oklch(19.5% 0.008 255deg));
  --surface: light-dark(oklch(98.9% 0.002 250deg), oklch(22.5% 0.009 255deg));
  --surface-sunken: light-dark(oklch(94.5% 0.005 250deg), oklch(17.5% 0.008 255deg));
  --surface-hover: light-dark(oklch(95.5% 0.005 250deg), oklch(25.5% 0.009 255deg));
  --line: light-dark(oklch(87.5% 0.007 250deg), oklch(33% 0.01 255deg));
  --line-soft: light-dark(oklch(91.5% 0.005 250deg), oklch(28.5% 0.009 255deg));

  /* ---------- Text ---------- */
  --ink: light-dark(oklch(23% 0.014 258deg), oklch(93.5% 0.006 250deg));
  --ink-muted: light-dark(oklch(40% 0.013 258deg), oklch(80% 0.008 250deg));
  --ink-subtle: light-dark(oklch(50% 0.011 258deg), oklch(68% 0.009 250deg));

  /* Primary surfaces are ink, not a brand hue. */
  --primary: var(--ink);
  --primary-hover: light-dark(oklch(35% 0.014 258deg), oklch(84% 0.008 250deg));
  --on-primary: var(--surface);

  /* ---------- Meaning: the one signal green, amber 80%, red 100% ---------- */
  --signal: light-dark(oklch(44% 0.12 156deg), oklch(80% 0.13 156deg));
  --signal-tint: light-dark(oklch(94.5% 0.04 156deg), oklch(29% 0.045 156deg));
  --warn: light-dark(oklch(70% 0.14 75deg), oklch(76% 0.13 78deg));
  --warn-ink: light-dark(oklch(46% 0.1 68deg), oklch(84% 0.11 80deg));
  --on-warn: oklch(23% 0.014 258deg);
  --warn-tint: light-dark(oklch(95.5% 0.045 85deg), oklch(28% 0.04 75deg));
  --danger: light-dark(oklch(47% 0.15 28deg), oklch(80% 0.11 28deg));
  --danger-tint: light-dark(oklch(95.5% 0.025 28deg), oklch(28% 0.04 28deg));

  /* ---------- Code and data ---------- */
  --code-bg: light-dark(oklch(95.5% 0.006 250deg), oklch(18% 0.008 255deg));
  --code-ink: var(--ink);
  --code-keyword: light-dark(oklch(38% 0.08 258deg), oklch(80% 0.06 250deg));
  --code-string: light-dark(oklch(45% 0.11 156deg), oklch(78% 0.11 156deg));
  --code-symbol: light-dark(oklch(48% 0.1 60deg), oklch(80% 0.1 70deg));
  --series-1: light-dark(oklch(36% 0.014 258deg), oklch(86% 0.008 250deg));
  --series-2: light-dark(oklch(55% 0.012 258deg), oklch(66% 0.01 250deg));
  --series-3: light-dark(oklch(72% 0.01 258deg), oklch(48% 0.01 250deg));
  --highlight: light-dark(oklch(86% 0.012 250deg), oklch(38% 0.012 255deg));

  /* Product marks: one hue per Product, fixed lightness and chroma per theme. */
  --mark-hue: 250;
  --focus: var(--signal);
  --shadow-color: light-dark(oklch(30% 0.02 258deg), oklch(5% 0 0deg));
  --shadow-raised:
    0 1px 0 color-mix(in oklch, var(--shadow-color) 8%, transparent),
    0 8px 24px -12px color-mix(in oklch, var(--shadow-color) 22%, transparent);
  --shadow-overlay:
    0 1px 0 color-mix(in oklch, var(--shadow-color) 8%, transparent),
    0 18px 40px -16px color-mix(in oklch, var(--shadow-color) 30%, transparent);

  /* ---------- Type ---------- */
  --font-sans: geist, "Helvetica Neue", helvetica, arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", menlo, monospace;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-ui: 0.875rem;
  --text-md: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-verdict: clamp(1.4375rem, 6.2vw, 2rem);
  --text-display: clamp(1.875rem, 8vw, 2.875rem);
  --tracking-tight: -0.035em;
  --tracking-snug: -0.015em;
  --tracking-caps: 0.07em;

  /* ---------- Space (4px steps) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---------- Shape ---------- */
  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 12px;
  --control-height: 2.75rem;
  --control-height-sm: 2.25rem;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.2s;

  /* ---------- Layout (.impeccable.md → Layout) ---------- */
  --page-narrow: 28rem;
  --page-default: 44rem;
  --page-wide: 72rem;
  --page-full: 100%;
  --measure: 66ch;
  --rail: 17rem;
  --gutter: 1rem;
  --bottom-nav-height: calc(4.25rem + env(safe-area-inset-bottom));

  /* Breakpoints, for reference: custom properties cannot drive @media, so
     layout.css repeats these literals. sm 30rem · md 48rem · lg 64rem · xl 80rem */
}

@media (width >= 48rem) {
  :root {
    --gutter: 1.5rem;
  }
}

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}