/* ============================================================
   Colour System
   A single-hue, neutral palette: black and its tints.

   The whole site is built from black at six strengths over a
   white surface. No colour beyond that — contrast and hierarchy
   come from strength alone, the way a monochrome print does.

   Scale (black mixed down toward white):
     token         strength   value      role
     ---------------------------------------------------------
     --black       100%       #000000    primary text
     --black-75     75%       #404040    secondary text
     --black-50     50%       #808080    muted text, captions
     --black-25     25%       #bfbfbf    strong divider, disabled
     --black-15     15%       #d9d9d9    hairline border, rule
     --black-5       5%       #f2f2f2    sunken surface, hover
     --white         0%       #ffffff    page surface

   Tints are solid values (black composited over white), not
   opacities — so they read the same on any background and never
   stack unexpectedly when layered.
   ============================================================ */

:root {
  /* --- Raw scale — black and its shades ------------------------- */
  --black:     #000000;  /* 100% */
  --black-75:  #404040;  /*  75% */
  --black-50:  #808080;  /*  50% */
  --black-25:  #bfbfbf;  /*  25% */
  --black-15:  #d9d9d9;  /*  15% */
  --black-5:   #f2f2f2;  /*   5% */
  --white:     #ffffff;  /*   0% */

  /* --- Semantic tokens — reference THESE in component CSS -------
     Named by role, mapped onto the scale above. Change a mapping
     here and every page follows.                                  */
  --bg:          var(--white);      /* page background            */
  --surface:     var(--white);      /* card / raised surface      */
  --surface-sunken: var(--black-5); /* wells, hover fills         */
  --hover:       var(--black-5);    /* interactive hover fill     */
  --line:        var(--black-15);   /* hairline borders, rules    */
  --line-strong: var(--black-25);   /* heavier dividers           */
  --muted:       var(--black-50);   /* muted / secondary-ish text */
  --accent:      var(--black-75);   /* secondary text, de-emph    */
  --fg:          var(--black);      /* primary text               */
}

/* --- Dark theme (opt-in) -----------------------------------------
   The default remains the single light theme above. Set
   `data-theme="dark"` on <html> to opt in.

   The trick: we don't touch a single semantic token. We only INVERT
   the raw scale — "ink" becomes white, the "surface" becomes black,
   and every tint mirrors to the same strength over the new ground.
   Because the semantic tokens (--fg, --bg, --line …) reference the
   raw scale and custom properties resolve at use-time, every role
   remaps automatically and keeps its exact meaning. One monochrome
   print, photo-negated.

     token         light      dark       strength (over new ground)
     ---------------------------------------------------------------
     --black       #000000    #ffffff    100%  primary text / "ink"
     --black-75    #404040    #bfbfbf     75%  secondary text
     --black-50    #808080    #808080     50%  muted (mid-grey, fixed)
     --black-25    #bfbfbf    #404040     25%  strong divider
     --black-15    #d9d9d9    #262626     15%  hairline border
     --black-5     #f2f2f2    #0d0d0d      5%  sunken surface, hover
     --white       #ffffff    #000000      0%  page surface           */
:root[data-theme="dark"] {
  --black:     #ffffff;  /* 100% — ink is now white */
  --black-75:  #bfbfbf;  /*  75% */
  --black-50:  #808080;  /*  50% — mid-grey sits at the pivot */
  --black-25:  #404040;  /*  25% */
  --black-15:  #262626;  /*  15% */
  --black-5:   #0d0d0d;  /*   5% */
  --white:     #000000;  /*   0% — surface is now black */
}
:root[data-theme="dark"] { color-scheme: dark; }

/* =================================================================
   HOW TO USE — every page links this file and takes ALL neutral
   colour from it. Reference the semantic tokens (--fg, --muted,
   --line, --surface …) in component CSS, or the raw --black-*
   scale when you need a specific strength. Never hard-code a hex
   value elsewhere.
   ================================================================= */

/* Base: page surface + primary text wherever this file is loaded. */
body { background-color: var(--bg); color: var(--fg); }

/* Text-strength utilities (mapped to semantic tokens so they invert
   correctly in dark mode). */
.text-primary   { color: var(--fg); }
.text-secondary { color: var(--accent); }
.text-muted     { color: var(--muted); }

/* Surface utilities. */
.surface        { background-color: var(--surface); }
.surface-sunken { background-color: var(--surface-sunken); }