/* ═══════════════════════════════════════════════════════════════════════
   Domzivo — design tokens
   ───────────────────────────────────────────────────────────────────────
   One set of names, two themes, switched by data-theme on <html>.

   Same vocabulary the admin panel already uses (canvas / surface / line /
   ink / brand + semantic state), so there is one language across the
   codebase rather than two that drift.

   ── Why this conversion is safe ──
   The dark site was built as "white at N% over black". So with
   --ink = white and --canvas = black on dark, every mechanical swap of
       bg-black      -> bg-canvas
       text-white    -> text-ink
       white/[0.04]  -> ink/[0.04]
       border-white/5-> border-ink/5
   renders byte-identical CSS to what shipped before. Nothing about the
   dark pages changes. The same markup then flips correctly on light,
   where ink is near-black and canvas is white, because the alpha
   modifiers carry over untouched.

   Values are space separated RGB triplets so Tailwind can apply an alpha:
   rgb(var(--canvas) / <alpha-value>) gives bg-canvas/90 for free, which is
   what keeps the navbar's glass effect working in both themes.

   :root is DARK on purpose. Most of the site is still dark and unconverted,
   so a page that has been moved onto tokens but not yet opted into light
   keeps looking exactly as it does today.
   ═══════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme='dark'] {
  /* Ground. Pure black, as the site ships today. */
  --canvas: 0 0 0;
  --surface: 10 10 10;
  --surface-2: 17 17 17;   /* exactly the navbar's old bg-[#111111] */
  --surface-3: 20 20 20;

  --line: 20 20 20;
  --line-strong: 31 31 31;

  /* White, so every text-white/NN mapping is unchanged. */
  --ink: 255 255 255;
  /* The body's default colour was #E8F4FF, not pure white, and only
     elements that explicitly said text-white were white. Kept separate so
     the ink mapping can stay at 255 without shifting body copy. */
  --ink-body: 232 244 255;
  --ink-2: 163 163 163;
  --ink-3: 115 115 115;

  /* Domzivo sapphire. */
  --brand: 0 85 255;
  --brand-hover: 51 119 255;
  --brand-ink: 255 255 255;
  --brand-wash: 4 18 46;
  --brand-line: 22 51 110;

  /* Semantic state, kept separate from the accent so "blue" never has to
     mean "good". */
  --ok: 0 212 170;
  --ok-wash: 4 38 32;
  --warn: 255 179 64;
  --warn-wash: 46 33 10;
  --bad: 255 77 106;
  --bad-wash: 48 15 21;
  --note: 64 170 255;
  --note-wash: 8 30 51;

  /* On a dark ground depth reads as a lighter surface, not a shadow, so
     these stay deliberately faint. */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 2px 8px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.6);

  --ring: 0 85 255;
}

:root[data-theme='light'] {
  /* White page, with raised surfaces carrying a slight blue bias so the
     greys belong with the sapphire rather than reading as a default. */
  --canvas: 255 255 255;
  --surface: 248 250 253;
  --surface-2: 242 246 251;
  --surface-3: 235 241 249;

  --line: 226 232 241;
  --line-strong: 203 213 227;

  --ink: 12 18 32;
  --ink-body: 12 18 32;
  --ink-2: 71 84 105;
  --ink-3: 112 124 146;

  /* Held at the same sapphire. It already carries enough contrast on white,
     and shifting it would make the brand read as two different blues
     depending on the page. */
  --brand: 0 85 255;
  --brand-hover: 0 68 204;
  --brand-ink: 255 255 255;
  --brand-wash: 238 243 255;
  --brand-line: 198 214 255;

  /* Darkened from the dark-theme versions: the neon values are made for a
     black ground and fail contrast on white. */
  --ok: 4 133 106;
  --ok-wash: 226 246 240;
  --warn: 170 102 0;
  --warn-wash: 254 243 224;
  --bad: 202 44 62;
  --bad-wash: 253 233 236;
  --note: 26 106 190;
  --note-wash: 232 242 252;

  /* Depth is a real shadow here, since there is no lighter surface to
     raise something onto. */
  --shadow-sm: 0 1px 2px rgb(12 18 32 / 0.05);
  --shadow: 0 1px 3px rgb(12 18 32 / 0.08), 0 1px 2px rgb(12 18 32 / 0.04);
  --shadow-lg: 0 12px 32px rgb(12 18 32 / 0.10), 0 2px 8px rgb(12 18 32 / 0.05);

  --ring: 0 85 255;
}

/* The page itself. Written here rather than as body utilities so a theme
   switch needs no markup change. */
body {
  background-color: rgb(var(--canvas));
  color: rgb(var(--ink-body));
}

/* Form controls and scrollbars follow the theme rather than staying dark
   on a white page, which is the usual thing people forget. */
:root[data-theme='light'] {
  color-scheme: light;
}

:root,
:root[data-theme='dark'] {
  color-scheme: dark;
}