/* ============================================================
   Steel City Codes - Design tokens
   One light theme. Every color, size, radius, shadow and easing
   used by a component lives here. Components never hardcode hex.
   ============================================================ */
:root{
  /* surfaces */
  --bg:#FBFAF7;            /* page: warm white */
  --bg-2:#F4F1EA;          /* tinted band */
  --bg-3:#ECE7DD;          /* deeper tint (hover fills). --ink-3 is only 4.4:1 here: no small text on it */
  --surface:#FFFFFF;

  /* ink */
  --ink:#1C1A17;
  --ink-2:#57524B;         /* secondary text, 7:1 on bg */
  --ink-3:#6F6960;         /* captions and meta, 5:1 on bg */
  --ink-hover:#2A2622;
  --line:#E6E1D7;          /* separators between rows, panel edges */
  --line-2:#D3CCBF;        /* top rules above blocks */
  --photo-ring:rgba(28,26,23,.08);   /* hairline edge on photos against the light page */

  /* brand gold (fills, rules, highlights) */
  --gold:#F1C446;
  --gold-2:#E4B52D;        /* hover */
  --gold-soft:#FBF0C9;     /* highlight wash */
  --gold-tint:#FDF7E3;     /* full band tint */
  --gold-text:#8A6706;     /* gold used as TEXT, 4.5:1 on bg */
  --on-gold:#1C1A17;

  /* dark bars (header, footer): warm near-black + light text */
  --ink-bar:#1A1613;       /* dark bar surface */
  --on-dark:#F5F1EA;       /* primary text on dark */
  --on-dark-2:#B7AEA1;     /* secondary text on dark, AA on --ink-bar */
  --line-dark:rgba(245,241,234,.14); /* hairline on dark */
  --fill-dark:rgba(245,241,234,.09); /* hover fill on dark */
  --scrim:rgba(26,22,19,.6);         /* flat --ink-bar wash over the home hero film: keeps --on-dark text AA on its brightest frame */

  /* focus */
  --ring:#1C1A17;

  /* shape: controls 8px, media and panels 14px, large frames 20px */
  --r-ctl:8px;
  --r:14px;
  --r-lg:20px;

  /* elevation (warm-tinted) */
  --shadow-2:0 6px 24px rgba(42,34,20,.10);
  --shadow-3:0 24px 60px rgba(42,34,20,.14);
  --shadow-bar:0 2px 24px rgba(26,22,19,.28);   /* sticky header once the page scrolls */

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --d1:.18s;
  --d2:.36s;
  --d3:.7s;

  /* type */
  --font-display:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --fw-display:600;        /* the one weight of --font-display (the only weight loaded) */
  --font-sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-hero:clamp(2.4rem,1.3rem + 3.6vw,3.9rem);
  --fs-h1:clamp(2.2rem,1.4rem + 3.2vw,3.6rem);
  --fs-h2:clamp(1.8rem,1.25rem + 2.2vw,2.9rem);
  --fs-h2-sm:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);     /* in-page h2: region sections, prose, logo wall */
  --fs-title-lg:clamp(1.5rem,1.2rem + 1vw,2rem);      /* large serif card titles: home programs, curriculum tracks */
  --fs-title:clamp(1.35rem,1.15rem + .8vw,1.75rem);   /* serif card and callout titles */
  --fs-stat:clamp(2.2rem,1.6rem + 2.2vw,3.4rem);      /* big numbers */
  --fs-h3:clamp(1.2rem,1.05rem + .6vw,1.45rem);
  --fs-lead:clamp(1.0625rem,1rem + .4vw,1.25rem);
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --measure:62ch;          /* longest comfortable line of body text */

  /* layout */
  --wrap:1200px;
  --wrap-wide:1440px;
  --wrap-narrow:720px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --header-h:76px;

  /* spacing */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem;
  --sec:clamp(4.5rem,3rem + 6vw,8rem);      /* section rhythm */
  --sec-sm:clamp(3rem,2rem + 4vw,5rem);
  --gap-split:clamp(2.5rem,2rem + 4vw,6rem);  /* column gap of every two-column text/photo layout */
  --gap-block:clamp(2rem,1.5rem + 2.5vw,4rem);/* vertical gap between blocks inside a section */
  --hero-pt:clamp(2rem,1rem + 3vw,4.5rem);    /* top padding of the inner-page heroes */
  --hero-min:clamp(30rem,72vh,44rem);         /* least height of the home hero film */
  /* ruled rows (lists, facts, FAQ): one density scale for the padding above and below each row */
  --row-compact:.625rem;
  --row:var(--s4);
  --row-roomy:var(--s5);

  /* layers */
  --z-header:50;
  --z-menu:100;
  --z-skip:200;
}
@media (max-width:720px){
  :root{--header-h:64px}
}