/* ============================================================================
   PRE►LOΔD — shared design tokens
   ----------------------------------------------------------------------------
   THE single source of truth for colour, theme and text-size across every
   surface on this origin: app.html, pattern.html, eloquence.html and the
   /secure module.

   Why this file exists: these blocks used to be copy-pasted into each page.
   Copies drift silently — PATT∑RN's gold, teal, rose and shadow had all aged
   apart from the app's before this was extracted, which nobody noticed because
   nothing compares them. Run `node scripts/check-token-drift.js` to check.

   RULES
   · Add or change a colour HERE, never in a page's own <style>.
   · A page may alias these into its own vocabulary — `--ink: var(--text)` — but
     must not redefine the value: `--ink: #e2eaf8` is a copy, not an alias.
   · Layout tokens that are genuinely page-specific stay in that page.

   THE CHECKER SEES VALUES TOO. It used to compare shared names only, so a copy
   under a NEW name passed it — this note once cited secure.css's --ink as the
   example of correct aliasing when it was a hardcoded copy of --text, one of 16
   there, both themes maintained by hand. Those are aliases now and a second
   check catches the class: a bare hex equal to a value here, under another
   name, fails. A hex inside a gradient or rgba() is still invisible to it. See
   docs/design-system.md §1.

   OFFLINE: this file is precached by sw.js. It must be, because every colour on
   every surface resolves through it — a missing copy renders the app with no
   palette at all rather than degrading gracefully.
   ========================================================================== */

/* ===== DARK THEME (default) ===== */
:root, [data-theme="dark"] {
  --bg:          #070d1a;
  --depth:       #0c1524;
  --surface:     #111e33;
  --surface2:    #152035;
  --lift:        #172544;
  --border:      #1d2f4e;
  --border-soft: #172035;
  --border-accent:#8a6d35;
  --gold:        #c9a255;
  --gold-light:  #e5c97a;
  --gold-dim:    #8a6d35;
  --teal:        #3dd9c5;
  --mind:        #a78bfa;
  --rose:        #f87171;
  --emerald:     #4ade80;
  /* Every accent above clears AA on all five dark grounds by a wide margin —
     worst case 5.48 (--rose on --lift). Dark is the easy theme: these hues were
     picked for it. The light block is where they had to be re-chosen. */
  --text:        #e2eaf8;
  --text-soft:   #a8bcd8;
  /* Raised from #5a7399, which was 3.14:1 on --lift and 3.46:1 on --surface —
     under WCAG AA (4.5) for normal text, on a token used for hundreds of
     labels, captions and citations. #7590ba is the smallest step that clears
     4.5 against EVERY ground in this theme (worst case 4.66 on --lift). It is
     visibly lighter than before; that is the cost of the text being readable. */
  --text-muted:  #7590ba;
  --muted:       #7590ba;
  --shadow:      0 4px 24px rgba(0,0,0,0.5);

  /* Module accents. Most modules wear an existing hue — the core takes --gold,
     Secure Attachment takes --rose (the Social pillar, which is what that
     module is), Eloquence takes --teal. Only PATT∑RN needs one of its own, so
     it lives here rather than in JS: declared as a token, it switches with the
     theme by itself and the drift checker can see it. */
  --accent-pattern: #7fb2d9;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --bg:           #f4f6fa;
  --depth:        #edf0f7;
  --surface:      #ffffff;
  --surface2:     #f0f3f9;
  --lift:         #e8ecf5;
  --border:       #d0d8e8;
  --border-soft:  #dde4f0;
  /* An EDGE, not text, so the bar is 3:1 (WCAG 1.4.11) rather than 4.5 — but
     #b8922c was 2.47:1 on --lift and 2.70 on --bg, under even that. It is not
     only decoration: eloquence.html sets its `:focus-visible` outline in this
     token, so in the light theme the focus ring was the least visible thing on
     the page, which is the one indicator that has to be seen. #a28127 is the
     smallest step that clears 3:1 on every light ground (3.11 worst, on
     --lift). Dark keeps #8a6d35, which already measured 3.12. */
  --border-accent:#a28127;
  /* Darkened from #9a6f1c, which was 3.80:1 on --lift and 3.95:1 on --depth —
     under AA, and this is the colour headings and the active nav item are set
     in, so brand text was the least readable text on the page. #8a6318 is the
     smallest step that clears 4.5 on every ground here (4.58 worst). It is a
     BRAND value, so the change is deliberate and small: the same gold, one
     shade deeper, only in the light theme. The dark theme keeps #c9a255. */
  --gold:         #8a6318;
  --gold-light:   #c49030;
  --gold-dim:     #c49030;
  /* MODULE ACCENTS, LIGHT. An accent chosen for a dark ground rarely survives
     the trip to a light one, so each of these is measured against all five
     light grounds, not against one representative background. --lift is the
     ground that fails first every time: it is the palest thing an accent sits
     on that is not white.
                            was      worst was            now      worst now
       Eloquence  --teal    #0e7a6e  4.41 on --lift  ->   #0e766b  4.64
       COMPASS    --mind    #5b4dc4  5.37                 unchanged
       Secure     --rose    #c73232  4.52                 unchanged
       PRE►LOΔD   --gold    #8a6318  4.58                 unchanged
     --teal was the only module accent under AA in either theme, and Eloquence
     is the module that wears it. #0e766b is the smallest step that clears 4.5
     on every light ground — two ticks of lightness, the same hue. Dark keeps
     #3dd9c5, which measures 8.62 at worst.

     --rose stays as it is on purpose. Secure wears the app's Social colour by
     the owner's decision, so it is not free to be re-chosen for contrast; at
     4.52 it clears AA without needing to be. */
  --teal:         #0e766b;
  --mind:         #5b4dc4;
  --rose:         #c73232;
  /* Not a module accent, but the same failure: #1a8a40 was 3.73:1 on --lift,
     and it is set as TEXT — eloquence.html's .lbl-ok and compass.css's
     .c-quiz__opt--right. #177938 clears 4.5 on every light ground (4.64
     worst). Dark keeps #4ade80 at 8.70. */
  --emerald:      #177938;
  --text:         #111827;
  --text-soft:    #374151;
  /* Also under AA: #6b7280 was 4.09:1 on --lift. #5d6472 clears every ground
     in this theme with 5.03:1 at worst. */
  --text-muted:   #5d6472;
  --muted:        #5d6472;
  --shadow:       0 4px 24px rgba(0,0,0,0.12);

  /* Darkened for a light ground — the dark-theme blue is far under AA on
     near-white. */
  --accent-pattern: #2c4a73;
}

/* ===== TEXT SIZE =====
   Applied via data-fontsize on <html>. All rem units scale automatically.
   Absent means never chosen, and the default is Large — see
   _applyStoredFontSize() in app.html. An explicit "default" is a deliberate
   choice for 16px and is the one case with no attribute set. */
html[data-fontsize="large"] { font-size: 20px; }
html[data-fontsize="xl"]    { font-size: 24px; }
html[data-fontsize="xxl"]   { font-size: 28px; }