:root {

  /* ---- BRAND ---- */
  --color-brand:          #263279;  /* official OSTA navy. 11.57:1 on white.
                                       Safe as text AND as a background */
  --color-brand-hover:    #1A2255;
  --color-brand-on-dark:  #A8B2EA;  /* links and text on navy surfaces.
                                       #263279 on navy is invisible */
  --color-brand-wash:     #EDEFF7;  /* tinted panels, icon backers */

  /* ---- ACCENT (action color) ---- */
  --color-accent:         #8AC34E;  /* official OSTA green. SURFACES ONLY.
                                       2.10:1 on white — NEVER text on light */
  --color-accent-hover:   #79AE43;
  --color-accent-on:      #131722;  /* the text color that sits ON accent.
                                       8.89:1. Navy fails on the hover state */
  --color-accent-ink:     #4E7328;  /* the ONLY green permitted as text on
                                       light. 5.52:1 */

  /* ---- LINKS (55+ audience) ----
     Default browser blue, always underlined in prose. Colour alone is
     not enough for this audience; the underline is the real cue.
     #0000EE on white is ~8.6:1 (well above the 4.5:1 AA floor).
     #0000EE on navy fails, so dark surfaces use a light blue that is
     still recognisably "a link" and still underlined. */
  --color-link:          #0000EE;
  --color-link-hover:    #0000AA;
  --color-link-visited:  #551A8B;
  --color-link-on-dark:  #B8D4FF;
  --color-link-wash:     #E8EEFF;

  /* ---- STATUS ---- */
  --color-alert:          #A3211A;  /* legislative alerts, urgent notices */
  --color-alert-wash:     #FBEAE8;
  --color-locked:         #5E6475;  /* members-only indicators */

  /* Added Pass 21 for the Notice component (info/success/warning/error).
     Info and success reuse existing tokens (--color-brand/-wash for info,
     --color-accent-ink for success text) — only the pieces that didn't
     already exist are added here. Warning is a genuinely new hue: neither
     brand navy nor accent green nor alert red reads as "warning", and
     reusing alert red for both would collapse two different severities
     into one color. Both computed against white: --color-warning
     7.20:1, and against --color-warning-wash 6.51:1 — verified, not
     eyeballed. */
  --color-warning:        #7A4E00;
  --color-warning-wash:   #FBF3E0;
  --color-success-wash:   #EFF7E7;  /* pairs with --color-accent-ink,
                                        5.02:1 against this wash */

  /* ---- NEUTRALS ---- */
  --color-ink:            #131722;
  --color-body:           #363B4A;
  --color-muted:          #5E6475;
  --color-border:         #CDD1DC;  /* BORDERS ONLY. Never text, never a
                                       section background */
  --color-border-soft:    #E6E8EF;

  /* ---- SURFACES ---- */
  --color-surface:        #FFFFFF;
  --color-surface-soft:   #F7F8FB;
  --color-surface-alt:    #EDEFF4;
  --color-surface-dark:   #1A2255;  /* brand navy, not black */
  --color-surface-workspace: #F3F4F8;  /* Pass 33, Step 2: portals/
                                       dashboards' own page background —
                                       one step denser/cooler than
                                       --color-surface-soft (#F7F8FB),
                                       enough to read as "a workspace" next
                                       to a public page's plain white
                                       without introducing a new hue. */

  /* ---- TYPE ---- */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Scale is deliberately larger than a general-audience site.
     Primary audience is 55+. Do not shrink these. */
  --text-display: 60px;
  --text-h1:      44px;
  --text-h2:      34px;
  --text-h3:      26px;
  --text-h4:      21px;
  --text-lead:    21px;
  --text-body:    18px;
  --text-small:   16px;
  --text-eyebrow: 14px;
  --text-micro:   13px;

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.70;

  /* ---- SPACING (8px grid) ---- */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* ---- LAYOUT ---- */
  --container-max: 1200px;
  --measure-max:   720px;
  /* The logo itself renders at ~41px tall (width-bound by max-width:
     200px against its actual ~4.85:1 lockup, not by any height cap) at
     every header height this token has ever had — 88px was mostly
     empty space above and below a much shorter mark. 64px keeps a
     visible gap around the logo and every nav link's own --tap-min box
     without the bar reading as oversized. */
  --header-height: 64px;
  --tap-min:       48px;   /* minimum interactive target. Never go below */

  /* ---- RADIUS / SHADOW ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  /* Full pill for every .btn / core button link sitewide (Stitch). */
  --radius-button: 999px;
  --color-button:       #76bc43;
  --color-button-text:  #000000;
  --color-button-hover: #68a838;
  --shadow-card:  0 2px 8px rgba(19,23,34,0.06);
  --shadow-hover: 0 8px 24px rgba(19,23,34,0.10);
  /* Pass 33: resting elevation for a PRIMARY-tier card (Step 3) — between
     --shadow-card (every other card's resting state) and --shadow-hover
     (an INTERACTIVE state, not a resting one, so it was never available
     to mean "this is the important card" without also implying a hover
     effect it doesn't have). */
  --shadow-primary: 0 6px 20px rgba(19,23,34,0.10);
  /* Pass 58 — the homepage redesign's own "soft shadow" spec: 40px blur,
     8% opacity, a modest 10px vertical offset. Distinct from --shadow-
     card/-hover/-primary above (all tighter/darker) rather than a
     replacement for them — scoped to the homepage's own redesigned cards
     only, not a sitewide change to every existing card's shadow. */
  --shadow-soft: 0 10px 40px rgba(19, 23, 34, 0.08);
  /* The accent green is too low contrast on white to serve as a focus
     indicator. --focus-ring-inverse is used on dark surfaces instead. */
  --focus-ring:         0 0 0 3px var(--color-brand);
  --focus-ring-inverse: 0 0 0 3px var(--color-surface);

  /* ---- HEADER GLASS ----
     For the fixed, frosted header only — every other surface on the site
     is opaque. Two opacities (a resting frost and a slightly denser one
     once the page has scrolled, so the bar reads as a hair more solid
     against whatever has scrolled under it) plus the blur amount itself.
     Border and shadow reuse existing tokens (--color-border-soft,
     --shadow-hover) rather than adding more. */
  --header-glass-bg:        rgba(255, 255, 255, 0.92);
  --header-glass-bg-strong: rgba(255, 255, 255, 0.97);
  --header-glass-blur:      blur(12px) saturate(120%);
}

@media (max-width: 767px) {
  :root {
    --text-display: 36px;
    --text-h1:      30px;
    --text-h2:      26px;
    --text-h3:      21px;
    --text-lead:    19px;
    /* PASS "Fix the accessibility failures found by the component
       inventory", item 1 — this used to read 17px, below the theme's
       own stated 18px floor ("Primary audience is 55+. Do not shrink
       these.") on every single phone visitor. Raised to match the
       desktop value exactly — --text-body no longer has a mobile step
       at all. */
    --text-body:    18px;
    /* A bit tighter than the 64px desktop value now that both are in
       the same range — mobile screen space is scarcer, and the logo
       and hamburger button both still clear --tap-min with room to
       spare at this height. */
    --header-height: 56px;
  }
}