/* ==========================================================================
   Back40 — base layer shared by every page (tokens, header, footer, focus).
   brand/western.css loads after this and sets the look.
   ========================================================================== */

:root{
  /* brand primitives */
  --b40-maroon:#500000;
  --b40-dark-maroon:#3C0000;
  --b40-light-maroon:#732F2F;
  --b40-dark-blue:#02233B;
  --b40-sage:#97BFB4;
  --b40-crimson:#8B0215;
  --b40-gold:#CF8A40;
  --b40-tan:#D6D3C4;
  --b40-jade:#115740;
  --b40-teal:#007B89;
  --b40-light-blue:#27A9E1;
  --b40-magenta:#900049;
  --b40-black:#202020;
  --b40-charcoal:#333333;
  --b40-dark-gray:#3E3E3E;
  --b40-gray:#707070;
  --b40-steel:#666666;
  --b40-light-gray:#D1D1D1;
  --b40-off-white:#F6F6F6;

  --font-head:"Work Sans", "Open Sans", Arial, sans-serif;
  --font-label:"Oswald", "Work Sans", Arial, sans-serif;
  --font-body:"Open Sans", Arial, sans-serif;

  /* site tokens mapped onto the brand palette */
  --maroon-900:var(--b40-dark-maroon);
  --maroon-800:var(--b40-maroon);
  --maroon-700:var(--b40-light-maroon);
  --maroon-100:#F3E9E9;            /* background-only tint of maroon */
  --wheat-500:var(--b40-gold);
  --wheat-100:#EFEDE6;             /* background-only tint of Tan */
  --good-700:var(--b40-jade);
  --good-100:#E5EFEC;              /* background-only tint of Sage */
  --critical-700:var(--b40-crimson);
  --critical-100:#F6E5E7;          /* background-only tint of Crimson */
  --accent:var(--b40-maroon);
  --on-accent:#FFFFFF;
  --bg:var(--b40-off-white);
  --surface:#FFFFFF;
  --surface-sunken:var(--b40-off-white);
  --border:var(--b40-light-gray);
  --ink:var(--b40-black);
  --ink-secondary:var(--b40-dark-gray);
  --ink-muted:var(--b40-steel);   /* 5.3:1 on Off-White, 5.7:1 on White, 4.7:1 or more on the tints above */
  --focus:var(--b40-dark-blue);
  --shadow-card:0 1px 2px rgba(80,0,0,0.05), 0 4px 16px rgba(2,35,59,0.07);
  /* chart series drawn from the brand palette */
  --s1:var(--b40-dark-blue); --s2:var(--b40-gold); --s3:var(--b40-teal);
  --s4:var(--b40-crimson);   --s5:var(--b40-light-blue);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000;            /* True Black */
    --surface:var(--b40-black);
    --surface-sunken:var(--b40-charcoal);
    --border:var(--b40-dark-gray);
    --ink:#FFFFFF;
    --ink-secondary:var(--b40-off-white);
    --ink-muted:var(--b40-light-gray);
    --maroon-100:#3A2424;
    --good-100:#1E302B; --good-700:var(--b40-sage);
    --critical-100:#2C2620; --critical-700:var(--b40-gold);
    --wheat-100:#3A3127; --wheat-500:var(--b40-gold);
    --accent:var(--b40-sage);
    --on-accent:var(--b40-black);
    --focus:var(--b40-light-blue);
    --shadow-card:0 1px 2px rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.35);
    --s1:var(--b40-light-blue); --s2:var(--b40-gold); --s3:var(--b40-sage);
    --s4:var(--b40-tan); --s5:var(--b40-light-gray);
  }
}
:root[data-theme="dark"]{
  --bg:#000000;            /* True Black */
  --surface:var(--b40-black);
  --surface-sunken:var(--b40-charcoal);
  --border:var(--b40-dark-gray);
  --ink:#FFFFFF;
  --ink-secondary:var(--b40-off-white);
  --ink-muted:var(--b40-light-gray);
  --maroon-100:#3A2424;
  --good-100:#1E302B; --good-700:var(--b40-sage);
  --critical-100:#2C2620; --critical-700:var(--b40-gold);
  --wheat-100:#3A3127; --wheat-500:var(--b40-gold);
  --accent:var(--b40-sage);
  --on-accent:var(--b40-black);
  --focus:var(--b40-light-blue);
  --shadow-card:0 1px 2px rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.35);
  --s1:var(--b40-light-blue); --s2:var(--b40-gold); --s3:var(--b40-sage);
  --s4:var(--b40-tan); --s5:var(--b40-light-gray);
}

/* ---------- Typography ---------- */
body{font-family:var(--font-body);}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;letter-spacing:-0.005em;}
.section-label,
.wordmark .text .top{
  font-family:var(--font-label);font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
}

/* Text on an accent fill: white on maroon (light), black on sage (dark) */
button.btn,
.segmented button.active:not(.seg-btn),   /* accent-filled toggles only; .seg-btn tabs use a white pill */
.tool-btn.primary,
.tool-btn.primary:hover{color:var(--on-accent);}
button.btn.secondary{color:var(--accent);}

/* In-progress pill: gold is a fill color, not a text color (fails contrast) */
.status-pill.progress{color:var(--ink-secondary);box-shadow:inset 0 0 0 1px var(--b40-gold);}

/* ---------- Header: solid maroon band with the official lockup ---------- */
.topbar{
  background:var(--b40-maroon) !important;
  border-bottom:4px solid var(--b40-dark-maroon);
}
.wordmark{gap:20px;}
.wordmark a{gap:20px !important;}
.brand-logo{display:block;flex:none;line-height:0;padding:6px 0;}  /* clear space >= height of the 'T' in Texas */
.brand-logo img{display:block;height:46px;width:auto;}
.brand-logo .logo-stacked{display:none;height:52px;}
.wordmark .text{
  padding-left:20px;border-left:1px solid rgba(255,255,255,0.45);
  font-family:var(--font-head);
}
.wordmark .text .main{font-family:var(--font-head);font-weight:600;font-size:18px;}
@media (max-width:720px){
  .brand-logo .logo-horizontal{display:none;}
  .brand-logo .logo-stacked{display:block;}
  .wordmark .text{padding-left:14px;}
  .wordmark .text .main{font-size:15.5px;}
}
@media (max-width:420px){
  .wordmark .text{display:none;}
}

/* Hero fence line in Gold */
.fence-line{opacity:0.7;}

/* ---------- Footer: logo + required nondiscrimination statement ---------- */
footer .footer-brand{display:block;margin:0 0 14px;line-height:0;}
footer .footer-brand img{height:auto;max-height:40px;width:auto;max-width:100%;}
footer .footer-brand .logo-on-dark{display:none;}
:root[data-theme="dark"] footer .footer-brand .logo-on-light{display:none;}
:root[data-theme="dark"] footer .footer-brand .logo-on-dark{display:inline;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) footer .footer-brand .logo-on-light{display:none;}
  :root:not([data-theme="light"]) footer .footer-brand .logo-on-dark{display:inline;}
}
footer .eeo-statement{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
  color:var(--ink-secondary);font-size:12.5px;line-height:1.6;max-width:110ch;
}

/* ---------- Tables that scroll sideways get keyboard focus (brand/a11y-scroll.js) ---------- */
.table-scroll[data-a11y-scroll]:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}