/* ============================================================
   THE UNFINISHED WORK — Core Tokens: Color + Type
   "Reform is patriotism." A civic palette drawn from the
   Obama "HOPE" poster (off red / off white / off blue) and the
   classical parchment of the Democracy Parthenon.
   ============================================================ */

/* ---------- Webfonts (variable, self-hosted) ---------- */
@font-face {
  font-family: "Cinzel";
  src: url("fonts/Cinzel.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-Italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ====================================================
     1. CORE PALETTE — extracted from Shepard Fairey's "HOPE" (2008)
     Five tones pulled by k-means directly off the poster:
       #09324c navy · #73929c steel · #cb1e27 red · #f9e2a9 cream · #c1c1a5 sage
     Everything below is a scale built around those exact anchors.
     ==================================================== */

  /* Navy — the HOPE dark blue. #09324c is the poster's dominant tone. */
  --navy-950: #051c2b;
  --navy-900: #09324c;   /* ★ poster anchor — deepest field */
  --navy-800: #0e425e;
  --navy-700: #15506f;   /* primary navy (text/fields/buttons) */
  --navy-600: #1f6a8c;

  /* Steel — the HOPE light blue. #73929c, faded and cool, never electric. */
  --steel-500: #577680;
  --steel-400: #73929c;  /* ★ poster anchor — the iconic faded blue */
  --steel-300: #a4b6bc;
  --steel-200: #cdd8db;

  /* Red — the HOPE red. #cb1e27 — confident flag red, slightly weathered. */
  --barn-900: #6f1014;   /* deepest red (shadow) */
  --barn-800: #8f1418;   /* deep red field */
  --brick-700: #b3171f;
  --brick-600: #cb1e27;  /* ★ poster anchor — primary red */
  --brick-500: #d9433f;
  --brick-300: #e7a39f;

  /* Cream — the HOPE highlight tone. #f9e2a9 is golden; the page uses a
     paler tint of it so large fields don't read too yellow. */
  --parchment: #fbf3dd;  /* page background — pale tint of the cream */
  --cream: #f9e2a9;      /* ★ poster anchor — warm cream accent / on-dark text */
  --sand: #efdcb0;
  --paper-white: #fdf8ec; /* elevated surfaces */

  /* Sage / stone — the HOPE transition tone. #c1c1a5, quiet structural neutral. */
  --stone-100: #e6e3d2;
  --stone-200: #d6d4be;
  --stone-300: #c1c1a5;  /* ★ poster anchor — sage */
  --stone-400: #9a9a7e;
  --stone-600: #6e6e58;

  /* Ink — the poster navy taken near-black. Body text. */
  --ink: #0d2330;
  --ink-soft: #36505c;
  --ink-faint: #6a7b84;

  /* ====================================================
     2. FRAMEWORK ACCENTS — Head · Heart · Hands · Renew
     A coded sequence used in TUW's organizing model.
     Use sparingly, as wayfinding — not as brand color.
     ==================================================== */
  --head: #4f63a8;    /* educate / understand — periwinkle blue */
  --heart: #e07a35;   /* synthesize / conviction — orange */
  --hands: #c0392b;   /* act / reform — red */
  --renew: #3f7a3f;   /* persist / begin again — green */

  /* ====================================================
     3. SEMANTIC TOKENS
     ==================================================== */
  --bg: var(--parchment);
  --bg-subtle: var(--cream);
  --bg-elevated: var(--paper-white);
  --bg-inverse: var(--navy-900);
  --bg-field: var(--barn-800);     /* bold red field, e.g. posters */

  --fg: var(--ink);
  --fg-muted: var(--ink-soft);
  --fg-faint: var(--ink-faint);
  --fg-on-dark: var(--parchment);
  --fg-on-red: var(--cream);

  --primary: var(--navy-700);
  --primary-hover: var(--navy-800);
  --primary-press: var(--navy-900);

  --accent: var(--brick-600);
  --accent-hover: var(--brick-700);
  --accent-press: var(--barn-900);

  --link: var(--navy-700);
  --link-hover: var(--brick-600);

  --border: #d8cfb2;            /* warm hairline on parchment */
  --border-strong: var(--stone-300);
  --border-inverse: rgba(250,244,225,0.18);
  --focus-ring: var(--steel-400);

  --good: #3f7a3f;
  --warn: #c98a1e;
  --bad: var(--brick-600);

  /* ====================================================
     4. TYPE FAMILIES
     ==================================================== */
  /* Cinzel — Trajan-lineage classical capitals. Civic monuments,
     hero statements, the word DEMOCRACY. ALL CAPS only. */
  --font-display: "Cinzel", "Times New Roman", serif;
  /* EB Garamond — editorial serif. Long-form, pull-quotes, captions. */
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  /* Public Sans — the U.S. government's open typeface (USWDS).
     Interface, labels, data, the working voice. */
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* ====================================================
     5. TYPE SCALE  (1.25 major-third, base 18px)
     ==================================================== */
  --text-xs: 0.694rem;   /* 12.5px */
  --text-sm: 0.833rem;   /* 15px  */
  --text-base: 1rem;     /* 18px  */
  --text-md: 1.2rem;     /* 21.6px */
  --text-lg: 1.5rem;     /* 27px  */
  --text-xl: 1.875rem;   /* 33.75 */
  --text-2xl: 2.344rem;  /* 42px  */
  --text-3xl: 2.93rem;   /* 52.7  */
  --text-4xl: 3.66rem;   /* 66px  */
  --text-5xl: 4.578rem;  /* 82px  */

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-loose: 1.7;

  --tracking-mono: 0.16em;  /* eyebrows / Cinzel caps */
  --tracking-wide: 0.06em;
  --tracking-tight: -0.012em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.u-display {            /* monumental Cinzel hero */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.u-eyebrow {            /* tracked civic overline */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--brick-600);
}

h1, .u-h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
h2, .u-h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
h3, .u-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--ink);
}
h4, .u-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.u-lede {               /* serif standfirst / lede paragraph */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--ink-soft);
}

p, .u-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink);
}

.u-prose {              /* long-form editorial serif body */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--ink);
}

.u-quote {              /* pull-quote, founding-document voice */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--navy-800);
}

.u-small, small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-soft);
}

.u-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

.u-label {              /* form labels / data keys */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}

code, .u-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}