/* ==========================================================================
   SNS theme: every colour token, five modes (addendum section 3).
   Keyed on :root[data-theme=light|dark|sand|silver|red]. light is the default
   when no attribute is set. prefers-color-scheme: dark maps to dark only when
   no data-theme is set (a saved choice always wins). js/theme-early.js writes
   the attribute before first paint.

   Token contract
     --bg        page ground            --bg-2      section ground (slightly off --bg)
     --fg        primary text           --fg-2      secondary text   --fg-3  tertiary text
     --accent    red text accent (the red mode has none and uses ivory)
     --fill      pill / button fill     --on-fill   text on --fill
     --cta       the one red CTA        --on-cta    text on --cta
     --nav-1..3  staircase menu tints   (text on them is --fg)

   Contrast, WCAG 2.x, computed by tools/contrast.js (re-run it after editing):
   
   pair               light    dark    sand  silver     red os-dark
   fg on bg           18.16   19.26   11.50   10.88    5.71   19.26
   fg-2 on bg          7.75   10.59    7.23    7.46    4.96   10.59
   fg-3 on bg          5.86    8.03    6.20    6.44    5.32    8.03
   accent on bg        7.20    4.78    6.45    6.10    5.71    4.78
   fg on bg-2         16.61   18.48   10.35    9.76    6.72   18.48
   fg-2 on bg-2        7.09   10.15    6.51    6.70    5.84   10.15
   fg-3 on bg-2        5.36    7.70    5.58    5.78    6.26    7.70
   accent on bg-2      6.58    4.59    5.81    5.48    6.72    4.59
   fg on tile 5%      16.31   17.94   10.43    9.87    5.42   17.94
   fg-2 on tile 5%     6.96    9.86    6.56    6.77    4.71    9.86
   fg on tile 10%     14.72   16.13    9.44    8.92    5.11   16.13
   on-fill on fill    18.16   19.26   11.50   10.88    7.20   19.26
   on-cta on cta       5.71    5.71    5.71    5.71    7.20    5.71
   fg on nav-1        13.36   13.17    8.44    7.76    8.68   13.17
   fg on nav-2        14.72   15.46    9.46    8.82    7.66   15.46
   fg on nav-3        16.16   17.32   10.56    9.98    6.78   17.32
   AA needs 4.5:1 for text. Decorative pieces (hairlines, the ghost watermark,
   the 1px swatch rings) are exempt and are marked aria-hidden in markup.
   ========================================================================== */

/* ---------- light (default) ---------- */
:root,
:root[data-theme='light'],
[data-theme-scope='light'] {
  color-scheme: light;
  --bg: #F5F5F5;      --bg-2: #EBEBEB;
  --fg: #0A0A0A;      --fg-2: #4D4D4D;    --fg-3: #5F5F5F;
  --accent: #A50E19;
  --fill: #0A0A0A;    --on-fill: #F5F5F5;
  --cta: #C1121F;     --on-cta: #F5F5F5;
  --nav-1: #D4D4D4;   --nav-2: #DEDEDE;   --nav-3: #E8E8E8;
  --scrim: #0A0A0A;
}

/* ---------- dark ---------- */
:root[data-theme='dark'],
[data-theme-scope='dark'] {
  color-scheme: dark;
  --bg: #000000;      --bg-2: #070707;
  --fg: #F5F5F5;      --fg-2: #B8B8B8;    --fg-3: #A0A0A0;
  --accent: #E2352F;
  --fill: #F5F5F5;    --on-fill: #000000;
  --cta: #C1121F;     --on-cta: #F5F5F5;
  --nav-1: #2A2A2A;   --nav-2: #1D1D1D;   --nav-3: #111111;
  --scrim: #000000;
}

/* ---------- sand ---------- */
:root[data-theme='sand'],
[data-theme-scope='sand'] {
  color-scheme: light;
  --bg: #D6C3A3;      --bg-2: #CDB997;
  --fg: #0A0A0A;      --fg-2: #3A332A;    --fg-3: #453D32;
  --accent: #7A0C15;
  --fill: #0A0A0A;    --on-fill: #D6C3A3;
  --cta: #C1121F;     --on-cta: #F5F5F5;
  --nav-1: #BAA784;   --nav-2: #C4B190;   --nav-3: #CEBB9B;
  --scrim: #0A0A0A;
}

/* ---------- silver ---------- */
:root[data-theme='silver'],
[data-theme-scope='silver'] {
  color-scheme: light;
  --bg: #C0C0C0;      --bg-2: #B6B6B6;
  --fg: #0A0A0A;      --fg-2: #2E2E2E;    --fg-3: #383838;
  --accent: #7A0C15;
  --fill: #0A0A0A;    --on-fill: #C0C0C0;
  --cta: #C1121F;     --on-cta: #F5F5F5;
  --nav-1: #A2A2A2;   --nav-2: #ADADAD;   --nav-3: #B8B8B8;
  --scrim: #0A0A0A;
}

/* ---------- red (no red text; accents use ivory) ---------- */
:root[data-theme='red'],
[data-theme-scope='red'] {
  color-scheme: dark;
  --bg: #C1121F;      --bg-2: #AD101B;
  --fg: #F5F5F5;      --fg-2: #F5E1E2;    --fg-3: #F8EAEB;
  --accent: #F5F5F5;
  --fill: #F5F5F5;    --on-fill: #A50E19;
  --cta: #F5F5F5;     --on-cta: #A50E19;
  --nav-1: #8E0D17;   --nav-2: #9D0F19;   --nav-3: #AC1019;
  --scrim: #5C070D;
}

/* ---------- OS dark preference, only when no mode was chosen ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #000000;      --bg-2: #070707;
    --fg: #F5F5F5;      --fg-2: #B8B8B8;    --fg-3: #A0A0A0;
    --accent: #E2352F;
    --fill: #F5F5F5;    --on-fill: #000000;
    --cta: #C1121F;     --on-cta: #F5F5F5;
    --nav-1: #2A2A2A;   --nav-2: #1D1D1D;   --nav-3: #111111;
    --scrim: #000000;
  }
}

/* ---------- mode-independent: the five grounds as swatches ---------- */
:root {
  --sw-light: #F5F5F5;
  --sw-dark: #000000;
  --sw-sand: #D6C3A3;
  --sw-silver: #C0C0C0;
  --sw-red: #C1121F;
}

/* ---------- derived alphas (resolve on the same element as the mode) ---------- */
:root,
[data-theme-scope] {
  --rule: var(--fg);
  --rule-10: color-mix(in srgb, var(--fg) 10%, transparent);
  --fill-5: color-mix(in srgb, var(--fg) 5%, transparent);
  --fill-10: color-mix(in srgb, var(--fg) 10%, transparent);
  --ghost: color-mix(in srgb, var(--fg) 10%, transparent);
  --selection-bg: var(--fg);
  --selection-fg: var(--bg);
}