/* ════════════════════════════════════════════════════════════════════════
   Design tokens — Jonathan Mulligan, Research Consultant (brassvector.com)

   Shared by every page under website/pages/. Edit colours HERE, not inline.

   CANONICAL SOURCE: ../../../../design-system/ds/tokens.css
   That design-system file is the master palette. This website copy mirrors it,
   with ONE intentional divergence:
     --surface / --inset  →  the website uses a single Espresso surface (#28241E);
                             the design system splits --surface (#1C1A16) and
                             --inset (#28241E) to show surface hierarchy in its docs.
   Do NOT "fix" that difference. Update the master first, then propagate here.

   Theming: :root is the dark default. The @media block gives system-light users a
   correct first paint before JS runs; an explicit html[data-theme="…"] attribute
   (set by the toggle JS) always wins via specificity.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:            #0F0D0A;
  --surface:       #28241E;
  --inset:         #28241E;
  --border:        #332F28;
  --text:          #EEEAE3;
  --muted:         #9490A8;
  --accent:        #B8924A;
  --accent-dim:    rgba(184,146,74,0.12);
  --feature:       #181C26;
  --feature-text:  #EEEAE3;
  --feature-muted: rgba(238,234,227,0.55);
  --nav-bg:        rgba(15,13,10,0.92);
  --card-hover:    #2E2820;
  --footer-copy:   #7E7974;
  --link:          #7B9FD6;
  --link-visited:  #9490A8;
  --error:         #C0392B;
  --nav-h:         64px;
  --max:           1160px;
  --font:          'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif;
  --mono:          'Atkinson Hyperlegible Mono', monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:            #F6F3EE;
    --surface:       #FFFFFF;
    --inset:         #F0ECE5;
    --border:        #DDD8CF;
    --text:          #18150F;
    --muted:         #766E64;
    --accent:        #7D5A1A;
    --accent-dim:    rgba(125,90,26,0.08);
    --feature:       #222838;
    --feature-text:  #F6F3EE;
    --feature-muted: rgba(246,243,238,0.6);
    --nav-bg:        rgba(246,243,238,0.92);
    --card-hover:    #F8F5F0;
    --footer-copy:   #766E5E;
    --link:          #2F4D9E;
    --link-visited:  #5C3F7A;
    --error:         #B03020;
  }
}

html[data-theme="light"] {
  --bg:            #F6F3EE;
  --surface:       #FFFFFF;
  --inset:         #F0ECE5;
  --border:        #DDD8CF;
  --text:          #18150F;
  --muted:         #766E64;
  --accent:        #7D5A1A;
  --accent-dim:    rgba(125,90,26,0.08);
  --feature:       #222838;
  --feature-text:  #F6F3EE;
  --feature-muted: rgba(246,243,238,0.6);
  --nav-bg:        rgba(246,243,238,0.92);
  --card-hover:    #F8F5F0;
  --footer-copy:   #766E5E;
  --link:          #2F4D9E;
  --link-visited:  #5C3F7A;
  --error:         #B03020;
}

html[data-theme="dark"] {
  --bg:            #0F0D0A;
  --surface:       #28241E;
  --inset:         #28241E;
  --border:        #332F28;
  --text:          #EEEAE3;
  --muted:         #9490A8;
  --accent:        #B8924A;
  --accent-dim:    rgba(184,146,74,0.12);
  --feature:       #181C26;
  --feature-text:  #EEEAE3;
  --feature-muted: rgba(238,234,227,0.55);
  --nav-bg:        rgba(15,13,10,0.92);
  --card-hover:    #2E2820;
  --footer-copy:   #7E7974;
  --link:          #7B9FD6;
  --link-visited:  #9490A8;
  --error:         #C0392B;
}