/* ─────────────────────────────────────────────────────────────
   critloop — design tokens

   FOUR CORE COLOURS.
     ONYX      #0A171D
     WHEAT     #FFF6E9
     NECTARINE #FFBD76
     WHITE     #FFFFFF

   White provides dark-mode text and elevated light surfaces.
   Dark surfaces mix White into Onyx: 6% for cards, 10% for
   composers. Wheat remains the warm light ground. Other values
   are derived from the core palette for semantic UI roles.

   ── Three grounds ─────────────────────────────────────────
     wheat      light  Wheat ground, Onyx ink, Nectarine accent
     onyx       dark   Onyx ground, White ink, Nectarine accent
     nectarine  warm   Nectarine ground, Onyx ink, Onyx accent

   On the Nectarine ground the accent inverts: Nectarine is the
   page, so the highlight has to go dark. Accent *text* there is a
   deep shade of Nectarine, which stays in the family while
   remaining distinguishable from Onyx ink.

   ── The accent has four roles ─────────────────────────────
     --accent      solid fills only: bars, pins, chart wedges
     --accent-on   text sitting ON an --accent fill
     --accent-ink  accent text, hairlines, borders, strokes
     --accent-inv  accent text sitting on --inv-bg

   Contrast against the relevant ground is noted per value.
   Components read tokens only. Never declare a colour whose sole
   definition lives inside a media or [data-theme] block.
   ───────────────────────────────────────────────────────────── */

:root {
  /* brand constants, identical in every theme */
  --onyx: #0a171d;
  --wheat: #fff6e9;
  --nectarine: #ffbd76;
  --white: #ffffff;
  --ring-accent: var(--nectarine);
  --surface-raised: var(--white);

  /* ── WHEAT ground (light, and the un-stamped default) ── */
  --bg: #fff6e9;
  --s1: #f6eee2;
  --s2: #ede5da;
  --s3: #ddd7cc;
  --chrome: #ede5da;

  --ink: #0a171d; /* 17.0 */
  --ink2: #636867; /* 5.3 */
  --ink3: #787b79; /* 4.0 */

  --line: #dfd9ce;
  --line2: #c2beb6;
  --grey: #989893;

  --accent: #ffbd76;
  --accent-on: #0a171d; /* 11.1 on the fill */
  --accent-ink: #ad5a00; /* 4.6 */
  --accent-inv: #ffbd76; /* 11.1 on --inv-bg */

  --inv-bg: #0a171d;
  --inv-ink: #fff6e9;

  /* code tokens: four roles drawn from the same two ramps */
  --code-punct: #787b79;
  --code-attr: #636867;
  --code-value: #0a171d;
  --code-tag: #ad5a00;

  --hatch: rgba(173, 90, 0, 0.85);

  /* deck chrome */
  --hud-h: 58px;

  /* type */
  --display: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ui: "Space Mono", ui-monospace, Menlo, monospace;

  /* radii */
  --r-surface: 10px;
  --r-cell: 8px;
  --r-chip: 5px;
}

/* ── ONYX ground ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="wheat"]):not([data-theme="light"]):not([data-theme="nectarine"]) {
    --bg: #0a171d;
    --surface-raised: #232e34;
  --s1: #19252b;
    --s2: #232e34;
    --s3: #343d40;
    --chrome: #232e34;

    --ink: #ffffff; /* White on Onyx */
    --ink2: #888a86; /* 5.2 */
    --ink3: #737775; /* 4.0 */

    --line: #2a3438;
    --line2: #474f50;
    --grey: #717573;

    --accent: #ffbd76;
    --accent-on: #0a171d;
    --accent-ink: #ffbd76; /* 11.1 */
    --accent-inv: #ad5a00; /* 4.6 on Wheat */

    --inv-bg: #fff6e9;
    --inv-ink: #0a171d;

    --code-punct: #737775;
    --code-attr: #888a86;
    --code-value: #ffffff;
    --code-tag: #ffbd76;

    --hatch: rgba(255, 189, 118, 0.9);
  }
}

:root[data-theme="onyx"],
:root[data-theme="dark"] {
  --bg: #0a171d;
  --surface-raised: #232e34;
  --s1: #19252b;
  --s2: #232e34;
  --s3: #343d40;
  --chrome: #232e34;

  --ink: #ffffff;
  --ink2: #888a86;
  --ink3: #737775;

  --line: #2a3438;
  --line2: #474f50;
  --grey: #717573;

  --accent: #ffbd76;
  --accent-on: #0a171d;
  --accent-ink: #ffbd76;
  --accent-inv: #ad5a00;

  --inv-bg: #fff6e9;
  --inv-ink: #0a171d;

  --code-punct: #737775;
  --code-attr: #888a86;
  --code-value: #ffffff;
  --code-tag: #ffbd76;

  --hatch: rgba(255, 189, 118, 0.9);
}

/* ── NECTARINE ground ────────────────────────────────────── */
:root[data-theme="nectarine"] {
  --ring-accent: var(--wheat);
  --bg: #ffbd76;
  --surface-raised: #ffd5a6;
  --s1: #ffd5a6; /* tinted toward Wheat so surfaces lift */
  --s2: #ffcb92;
  --s3: #e2a96b; /* shaded toward Onyx for recessed blocks */
  --chrome: #ffcb92;

  --ink: #0a171d; /* 11.1 */
  --ink2: #564a39; /* 5.3 */
  --ink3: #6d5a41; /* 4.0 */

  --line: #dfa76a;
  --line2: #c29460;
  --grey: #987751;

  /* The page is Nectarine, so the highlight goes dark. */
  --accent: #0a171d;
  --accent-on: #fff6e9; /* 17.0 on the fill */
  --accent-ink: #854500; /* 4.5, a deep shade of Nectarine */
  --accent-inv: #ffbd76; /* 11.1 on --inv-bg */

  --inv-bg: #0a171d;
  --inv-ink: #fff6e9;

  --code-punct: #6d5a41;
  --code-attr: #564a39;
  --code-value: #0a171d;
  --code-tag: #854500;

  --hatch: rgba(133, 69, 0, 0.85);
}