/* ============================================================
   Facet design tokens: THE SINGLE SOURCE OF TRUTH.
   Extracted verbatim from the homepage token block so nothing drifts.
   Every page links this file and consumes these variables. Do NOT
   redefine tokens in a page's inline :root, and do NOT hardcode a color,
   radius, or font. If a value is missing here, add it here.
   Machine-readable mirror: tokens.json in this folder.
   ============================================================ */

/* Tier 1: raw brand scale (never consumed directly by a component) */
:root {
  --shale-0: #f6f6f4;
  --shale-1: #e6e6e2;
  --shale-2: #c9c9c2;
  --shale-3: #9c9c92;
  --shale-4: #6e6e64;
  --shale-5: #4a4a42;
  --shale-6: #2e2e28;
  --shale-7: #1c1c19;
  --shale-8: #121210;
  --shale-9: #08080a;

  --paper: #fafaf7;
  --ink: #08080a;

  /* The single brand accent, green. Reserved for live numbers, gauges,
     confirmations, primary actions. Never a co-brand color. */
  --accent: #489c72;
  --accent-dim: #3f8b64;
  --accent-wash: rgba(72, 156, 114, 0.14);

  /* Rounded radius. Buttons and cards use these, not a pill. */
  --radius: 2px;
  --radius-lg: 6px;

  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-ui: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;

  --nav-h: 68px;
  --container: 1180px;
  --gutter: 24px;
  --step: clamp(64px, 8vw, 112px);
}

/* Tier 2: semantic tokens. Dark is the default, lifted off pure black. */
:root,
:root[data-theme="dark"] {
  --bg: #0a0a0c;
  --surface: #131313;
  --surface-2: #191917;
  --elevated: #1f1f1c;
  --border: #26261f;
  --border-hi: #3a3a32;
  --text-1: var(--shale-0);
  --text-2: var(--shale-2);
  --text-3: var(--shale-3);
  /* lifted to clear WCAG AA at 5.11:1; carries small text */
  --text-4: #82827a;
  --cube-top: #ffffff;
  --cube-side: #7c7c7c;
  --cube-front: #262626;
  --cube-stroke: #141414;
  --cube-word: #f6f6f4;
  /* 5.91:1 on the dark ground, so it also carries small text */
  --accent-text: #489c72;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: var(--paper);
  --surface: #ffffff;
  --surface-2: #f2f2ee;
  --elevated: #ffffff;
  --border: #e0e0d8;
  --border-hi: #c9c9c0;
  --text-1: #111110;
  --text-2: #43433c;
  --text-3: #6e6e64;
  --text-4: #71716a;
  --accent: #489c72;
  --accent-dim: #3f8b64;
  --accent-wash: rgba(72, 156, 114, 0.1);
  /* #489c72 is 3.35:1 on white: fine for fills and numerals, below AA for
     body-size text, so small accent text darkens to 4.95:1 */
  --accent-text: #1d7f5c;
  --cube-top: #e2e2e2;
  --cube-side: #8c8c8c;
  --cube-front: #202020;
  --cube-stroke: #141414;
  --cube-word: #202020;
  color-scheme: light;
}

/* Fallback for viewers with no explicit theme, honoring the OS preference */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: var(--paper);
    --surface: #ffffff;
    --surface-2: #f2f2ee;
    --elevated: #ffffff;
    --border: #e0e0d8;
    --border-hi: #c9c9c0;
    --text-1: #111110;
    --text-2: #43433c;
    --text-3: #6e6e64;
    --text-4: #71716a;
    --accent: #489c72;
    --accent-dim: #3f8b64;
    --accent-wash: rgba(72, 156, 114, 0.1);
    --accent-text: #1d7f5c;
    --cube-top: #e2e2e2;
    --cube-side: #8c8c8c;
    --cube-front: #202020;
    --cube-stroke: #141414;
    --cube-word: #202020;
    color-scheme: light;
  }
}