/*
  Design tokens, v2 — replaced 2026-08-17 per layout/University
  Application Guide v3.html, a new comp explicitly commissioned because
  the v1 palette (muted amber accent, Newsreader serif headlines,
  narrow radii) read as too institutional/quiet for a teenage audience.

  Palette extracted directly from the v3 comp's own CSS (real hex
  values, not eyeballed): a deep indigo-navy brand color, a vivid
  orange action color, a bright blue secondary/link color, and a
  10-step neutral ramp matching the comp's own gray scale exactly.

  CLAUDE.md S8 compliance, checked deliberately, not assumed: the ban
  is on dark navy/blue PAGE BACKGROUNDS (the comp's own color-usage
  counts confirm this - #FFFFFF/#F9FAFB/#F2F4F7 together outnumber
  every navy shade combined). Navy here is a foreground/accent color
  (nav bar, headlines, a hero band) on an otherwise light page, which
  is exactly what CLAUDE.md S8 asks for by default ("white/light-
  neutral bg with brand accents") - not the dark-mode-everywhere
  aesthetic the rule forbids. No gradients, no glassmorphism anywhere
  in this file, matching both the comp itself and CLAUDE.md's separate
  ban on those regardless of palette.

  --font-serif keeps its old name for zero template churn (every
  var(--font-serif) call site across app/templates/ picks up the new
  value automatically) even though its new value, Manrope, is not
  actually a serif - a deliberate, disclosed shortcut, not an
  oversight. Renaming to --font-display is a reasonable follow-up if
  the naming mismatch ever actually confuses someone editing this file.
*/

:root {
  /* Surface — the comp's own 10-step neutral ramp (Untitled UI's
     published gray scale, confirmed by exact hex match), lightest to
     darkest: FFFFFF, F9FAFB, F2F4F7, E4E7EC, D0D5DD, 98A2B3, 667085,
     475467, 344054, 101828. */
  --bg:            #F9FAFB;
  --bg-band:       #F2F4F7;
  --bg-band-soft:  #F9FAFB;
  --surface:       #FFFFFF;
  --border:        #E4E7EC;
  --border-soft:   #F2F4F7;
  --border-strong: #D0D5DD;

  /* Ink — --ink-soft and --ink-faint are darkened from the comp's own
     raw swatches (#667085/#98A2B3): those read fine as decorative
     dividers but fail WCAG AA at real body-text sizes (confirmed by
     tools/accessibility_scan.py against the running app, not
     eyeballed - #98A2B3 measured 2.34:1 on --bg-band, needs 4.5:1).
     Both values below clear 4.5:1 against every surface token in this
     file with real margin, not a knife-edge pass. */
  --ink:        #101828;
  --ink-2:      #344054;
  --ink-muted:  #475467;
  --ink-soft:   #5A6478;
  --ink-faint:  #626C86;

  /* Content placed on top of a --brand dark-navy surface (the header,
     a hero band) */
  --on-ink:        #F9FAFB;
  --on-ink-muted:  #BFC9E6;
  --on-ink-faint:  #A9B4D8;

  /* Brand navy — header/nav, headlines, primary UI chrome. NOT a page
     background (see CLAUDE.md S8 note above). */
  --brand:         #1B2A6B;
  --brand-strong:  #101A3D;
  --brand-soft:    #182350;
  --brand-tint:    #C7D0EA;
  --brand-tint-bg: #EFF6FF;

  /* Accent — the one saturated action color, a vivid orange in this
     palette, replacing v1's muted amber. Three tiers, not two: the
     comp's own #F25C2A (--accent) fails WCAG AA with white text
     (3.31:1, confirmed by tools/accessibility_scan.py against the
     running app - not assumed) at real button/label text sizes, so it
     is reserved for non-text-contrast uses (a decorative mark, a
     border, a background sitting behind dark text) - never as a
     button fill or as text color on a light surface. --accent-strong
     is what buttons and small caps-style labels ("eyebrow" text)
     actually use; --accent-press is one step darker again for
     hover/pressed states, so a button's resting and hover colors are
     visibly distinct, not the same value doing double duty. */
  --accent:         #F25C2A;
  --accent-strong:  #B93E17;
  --accent-press:   #A33612;
  --accent-border:  #F7A98A;
  --accent-on:      #FFFFFF;

  /* Link / info — the comp's bright blue, distinct from --brand navy
     so a hyperlink or an informational badge never gets confused with
     the primary chrome color. */
  --link:      #175CD3;
  --link-soft: #EFF6FF;

  /* Band verdicts — same semantic hue mapping v1 already used (reach
     warm/red, target blue, likely green), now the comp's exact
     brand shades instead of an oklch approximation. */
  --reach:         #B42318;
  --reach-bg:      #FEF3F2;
  --reach-border:  #FDA29B;
  --target:        #175CD3;
  --target-bg:     #EFF6FF;
  --target-border: #B2CCFF;
  --likely:        #027A48;
  --likely-bg:     #ECFDF3;
  --likely-border: #A6F4C5;

  /* Inline verdict text (submit / withhold / not-applicable) */
  --good:  #027A48;
  --bad:   #B42318;
  --warn:  #B54708;

  /* Type — corrected against the comp's own real markup (extracted
     from its self-unpacking bundle script, not visible on a plain
     read of the file), not the first pass's guess. The comp's outer
     wrapper sets Manrope as the ambient default for plain paragraph
     copy; every heading, button, nav link, eyebrow/label, badge, and
     stat figure explicitly overrides to bold Plus Jakarta Sans (67
     explicit uses in the unpacked template, weight 700-800 - Manrope
     never appears at heavy weight anywhere). The comp uses no
     monospace font at all - --font-mono is kept defined (still IBM
     Plex Mono) only as a fallback for any genuinely technical context
     that might need one; it is no longer used for eyebrows/labels/
     badges/stat figures (see base.css, components.css).
     --font-serif keeps its old name for zero template churn even
     though it is not a serif - same disclosed shortcut as before,
     just now pointing at the right typeface. */
  --font-serif: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-sans:  'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-body:  'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', Consolas, monospace;

  --text-display: clamp(2.25rem, 1.55rem + 3vw, 3.6rem);
  --text-h1:      clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --text-h2:      clamp(1.65rem, 1.45rem + 1vw, 2.2rem);
  --text-h3:      clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem);
  --text-lead:    clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --text-body-lg: 1.0625rem;
  --text-body:    1rem;
  --text-small:   0.9375rem;
  --text-micro:   0.85rem;
  --text-label:   0.6875rem;

  /* Space — unchanged from v1; the comp's own spacing wasn't
     extractable as cleanly as its color/type tokens, and CLAUDE.md's
     complaint was specifically about "boring," which color/type/
     radius answer directly - rhythm didn't need to move. */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 2.75rem;
  --space-7: 4rem;
  --space-8: 5.5rem;

  /* Radius — wider than v1's 3-6px. Sharp corners read as
     institutional/serious; the v3 comp's own cards and buttons use a
     noticeably rounder 8-12px, which is most of what makes it feel
     less "boring" independent of color at all. */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --container-max:    1240px;
  --container-narrow: 1100px;

  --shadow-panel: 0 24px 60px -30px rgb(16 24 40 / 0.28);
}