/* Design tokens: colors, typefaces and layout scale.

   Everything theme-dependent lives here. Components read tokens and never
   test the theme themselves, so adding a theme means editing this file only.

   The dark palette mirrors the light one's contrast hierarchy rather than
   just inverting it — matching ratios, not matching lightness:

     tier        light            dark
     --ink       16.1:1           15.1:1
     --ink-soft  12.4:1           12.9:1
     --muted      7.3:1            7.3:1
     --dim        6.6:1            6.7:1
     --accent     7.0:1            8.6:1
*/

:root{
  color-scheme: light;

  /* Three text tiers against --bg, each with real headroom over the 4.5:1
     AA floor rather than sitting on it. --dim carries the 11px chips.
     --dim stays warm and --muted cool so the two tiers stay distinguishable. */
  --bg:#f5f4f0; --paper:#faf9f6; --ink:#17181a; --muted:#4f5152; --dim:#57574f;
  --ink-soft:#2c2e30;                    /* long-form prose and skill values */
  --line:#e1dfd8; --accent:#3d5a3a;      /* restrained deep green, used sparingly */
  --on-accent:#ffffff;                   /* text on an --accent fill (::selection) */
  --nav-bg:rgba(245,244,240,.82);        /* --bg, translucent behind the blur */
  --accent-glow:rgba(61,90,58,.16);      /* ring around the availability dot */
  --shot-shadow:none;                    /* screenshots need no lift on paper */

  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:860px;
}

/* ---------------------------------------------------------------------------
   Dark theme.

   The two blocks below carry IDENTICAL declarations and must stay that way —
   build.js compares them and fails if they drift. They exist separately
   because they answer different questions:

     [data-theme="dark"]        an explicit choice, or the inline head script
                                resolving the system preference before paint
     the media query            the no-JS path

   :not([data-theme="light"]) is what stops the media query from overriding
   someone who deliberately chose light on a dark-mode machine.
--------------------------------------------------------------------------- */

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#16150f; --paper:#201e17; --ink:#ece9e1; --muted:#a7a49b; --dim:#9f9c91;
  --ink-soft:#dcd8ce;
  --line:rgba(255,255,255,.10); --accent:#8bbf78;
  --on-accent:#16150f;
  --nav-bg:rgba(22,21,15,.82);
  --accent-glow:rgba(139,191,120,.18);
  --shot-shadow:0 1px 2px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#16150f; --paper:#201e17; --ink:#ece9e1; --muted:#a7a49b; --dim:#9f9c91;
    --ink-soft:#dcd8ce;
    --line:rgba(255,255,255,.10); --accent:#8bbf78;
    --on-accent:#16150f;
    --nav-bg:rgba(22,21,15,.82);
    --accent-glow:rgba(139,191,120,.18);
    --shot-shadow:0 1px 2px rgba(0,0,0,.5);
  }
}