/* WHYZ DESIGN TOKENS - the single source of visual truth.
   Never hard-code a colour, size or space value in a page.
   Contrast ratios verified by scripts/contrast.mjs (WCAG 2.1 SC 1.4.3). */
:root {
  color-scheme: dark;

  /* ---- raw brand palette (BRAND-FACTS.md, from whyz_symbol.html / whyz_pfp.html) ---- */
  --whyz-red:        #6b000f;   /* 14 uses in whyz_symbol.html - the brand red */
  --whyz-red-deep:   #720013;
  --whyz-gold:       #d4c47a;
  --whyz-cream:      #ede5d8;
  --whyz-black:      #0d0d0d;
  --whyz-ink:        #000000;
  --whyz-white:      #ffffff;

  /* ---- semantic, dark ground (the default) ----
     RULE: --whyz-red is a FIELD colour. It is 1.51:1 on black and must never be text. */
  --bg:              var(--whyz-black);
  --surface:         #141414;
  --field:           var(--whyz-red);      /* blocks/bands only, never type */
  --field-deep:      var(--whyz-red-deep);
  --text:            var(--whyz-cream);    /* 15.55:1 on --bg */
  --text-strong:     var(--whyz-white);    /* 19.44:1 */
  --text-muted:      #9c968c;              /* 6.62:1 on --bg, measured */
  --accent:          var(--whyz-gold);     /* 11.08:1 on --bg */
  --border:          #2a2622;
  --focus:           var(--whyz-gold);     /* 11.08:1 - exceeds the 3:1 focus minimum */
  --success:         #7db87d;
  --warning:         var(--whyz-gold);
  --danger:          #ff6b6b;              /* readable on dark, unlike --whyz-red */

  /* ---- inverted (cream ground) sections: red becomes ink ---- */
  --inv-bg:          var(--whyz-cream);
  --inv-text:        var(--whyz-black);    /* 15.55:1 */
  --inv-accent:      var(--whyz-red);      /* 10.29:1 on cream - legal as type here */
  --inv-border:      #c9bfae;
  --inv-muted:       #5c5449;      /* 5.96:1 on cream. --text-muted is only 2.35:1 there. */
  --inv-success:     #1f5f1f;      /* 6.19:1 on cream */
  --inv-danger:      #8f1d1d;      /* 7.11:1 on cream */
  --inv-focus:       var(--whyz-red);   /* 10.29:1 on cream. Gold would be 1.4:1 - invisible. */

  /* ---- type ---- */
  --font-display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-text:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* TYPE SCALE - every step is 1.15^n rem, n written beside it. The three small steps
     used to be hand-set at 0.75 / 0.875 / 1rem, which is three different ratios
     (1.167, 1.143, 1.25) in four steps - a list of sizes, not a scale. 1.15 was chosen
     because it lands within 6% of every size already in use, so the page keeps its
     proportions and gains a rule. scripts/rules/type-scale-from-ratio.mjs recomputes
     each power and fails the build if a value drifts more than 0.5% off it. */
  --type-ratio: 1.15;
  --fs-1: 0.7561rem;  /* 1.15^-2  12.10px */
  --fs-2: 0.8696rem;  /* 1.15^-1  13.91px */
  --fs-3: 1rem;       /* 1.15^0   16.00px  base, and the mobile body minimum */
  --fs-4: clamp(1.3225rem, 1rem + 1.2vw, 1.749rem);      /* 1.15^2  -> 1.15^4  */
  --fs-5: clamp(2.0114rem, 1.2rem + 4vw, 4.6524rem);     /* 1.15^5  -> 1.15^11 */
  --fs-6: clamp(4.0456rem, 2rem + 18vw, 12.3755rem);     /* 1.15^10 -> 1.15^18 */
  --lh-body: 1.5;
  --lh-display: 0.85;
  --tracking-display: 0.01em;
  --tracking-label: 0.18em;

  /* ---- space (6-step, everything is a multiple) ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 1rem;
  --sp-4: 2rem;    --sp-5: 4rem;   --sp-6: 8rem;
  /* The page's side margin, shared by .shell and .edge so the two can never disagree
     about how wide a line of text may be. 16px everywhere, except on the narrowest phone
     still in use where 32px of gutter is 10% of the screen and costs a character per
     line - measured 288px and 29 characters against a 30-45 band. */
  --gutter: var(--sp-3);

  /* ---- other ---- */
  --radius-0: 0;
  --radius-1: 2px;
  --shadow-1: 0 1px 0 var(--border);
  --shadow-2: 0 24px 60px rgb(0 0 0 / 0.55);
  --bp-sm: 40rem; --bp-md: 64rem; --bp-lg: 90rem;
  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --tap: 44px;              /* minimum tap target */
  /* The masthead is sticky. Anything an anchor jumps to must stop BELOW it, so this
     height is a token rather than a number repeated in two files. 52px bar + 1px border.
     scripts/rules/anchor-clears-sticky-header.mjs checks the two stay in step. */
  --header-h: 53px;
  --measure: 62ch;
}

/* Self-hosted, 2 files total, 24KB. No third-party origin. */
@font-face {
  font-family: "Bebas Neue";
  src: url("/assets/fonts/bebas-neue-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/space-mono-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}

@media (max-width: 22.5rem) { :root { --gutter: 0.625rem; } }   /* 10px a side at 320 */