/* ============================================================================
   U.S. debt & Treasury refinancing — design tokens.

   Single source of truth for every colour, spacing value, font size and
   radius on this site. No other stylesheet in site/assets/ may define a raw
   hex colour, an rgb()/hsl() literal, or a px font-size — everything else
   references a custom property declared here. Enforced by
   tests/test_accuracy.py::test_only_tokens_css_defines_raw_design_values.

   This file also declares the cascade layer order for every stylesheet the
   page loads (below), once, so precedence between files does not depend on
   <link> order. Layers load in parallel via separate <link> tags — never
   @import, which serializes the fetch.
   ========================================================================= */

@layer tokens, base, chrome, layout, figures, schedule, methods, responsive, video;

@layer tokens {

:root {
  color-scheme: light;

  /* -- surfaces & ink ---------------------------------------------------- */
  --bg:              #E4E8EE;
  --surface:         #F2F4F7;
  --surface-sunken:  #E9ECF1;
  --rule:            #C6CEDA;
  --rule-strong:     #A7B2C2;
  --ink:             #0F1720;
  --ink-2:           #46515F;
  --ink-3:           #6B7787;

  /* -- reserved status (never a series) ---------------------------------- */
  --warn-bg:  #FBF0DC;
  --warn-ink: #7A4E00;
  --err-bg:   #FBE3E2;
  --err-ink:  #9B2C28;
  --ok-ink:   #1F6B45;

  /* -- categorical series: five tenor buckets, fixed slot order ----------
     Validated (dataviz/scripts/validate_palette.js, adjacent pairlist):
     light on #F2F4F7 -> band PASS, chroma PASS, CVD worst 9.2, normal 24.0,
     contrast WARN (relief = legend + data table + 2px segment gaps).       */
  --series-short:  #2a78d6;
  --series-medium: #1baf7a;
  --series-long:   #eb6834;
  --series-frn:    #4a3aa7;
  --series-tips:   #e87ba4;

  /* -- type -------------------------------------------------------------- */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
               "Roboto Mono", Menlo, Consolas, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.1rem, 1.15rem + 3.6vw, 3.25rem);
  --fs-h2:      clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
  --fs-h3:      1.0625rem;
  --fs-body:    1rem;
  --fs-small:   0.8125rem;
  --fs-eyebrow: 0.6875rem;

  /* -- space & shape ----------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radius: 2px;
  --rail-w: 168px;
  --content-w: 940px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:             #0D1117;
    --surface:        #161B22;
    --surface-sunken: #1B2129;
    --rule:           #242C36;
    --rule-strong:    #38424E;
    --ink:            #E9EEF4;
    --ink-2:          #A6B2BF;
    --ink-3:          #7A8593;
    --warn-bg:  #2A2113;
    --warn-ink: #F0C673;
    --err-bg:   #2C1618;
    --err-ink:  #F0918D;
    --ok-ink:   #6FCF97;
    --series-short:  #3987e5;
    --series-medium: #199e70;
    --series-long:   #d95926;
    --series-frn:    #9085e9;
    --series-tips:   #d55181;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:             #0D1117;
  --surface:        #161B22;
  --surface-sunken: #1B2129;
  --rule:           #242C36;
  --rule-strong:    #38424E;
  --ink:            #E9EEF4;
  --ink-2:          #A6B2BF;
  --ink-3:          #7A8593;
  --warn-bg:  #2A2113;
  --warn-ink: #F0C673;
  --err-bg:   #2C1618;
  --err-ink:  #F0918D;
  --ok-ink:   #6FCF97;
  --series-short:  #3987e5;
  --series-medium: #199e70;
  --series-long:   #d95926;
  --series-frn:    #9085e9;
  --series-tips:   #d55181;
}

} /* @layer tokens */