/* =====================================================================
   NAACP CommunityWorks · Core color + type tokens
   ===================================================================== */

/* --- Fonts --------------------------------------------------------- */
/* 14459 = a heavyweight extended display sans used for COMMUNITY mark   */
@font-face {
  font-family: "CW Display";
  src: url("fonts/14459.ttf") format("truetype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
/* Flood = the brushed handwritten script used for "WORKS" + accents     */
@font-face {
  font-family: "CW Brush";
  src: url("fonts/Flood.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Gothic CG No3 = condensed industrial gothic, secondary display        */
@font-face {
  font-family: "CW Gothic";
  src: url("fonts/GothicCGNo3-Regular.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Garamond Premier Pro SmBd Italic = editorial accent, pull-quotes      */
@font-face {
  font-family: "CW Editorial";
  src: url("fonts/GaramondPremrPro-SmbdIt.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
/* Montserrat = utility / body sans                                      */
@font-face {
  font-family: "CW Sans";
  src: url("fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand color tokens (sampled from logo) --------------------- */
  --cw-yellow:     #FFCD00;   /* NAACP yellow — primary accent       */
  --cw-yellow-deep:#F0C400;   /* hover / pressed                     */
  --cw-cream:      #F7E8B8;   /* tinted overlay (logo highlight)     */

  --cw-navy:       #00407F;   /* deep navy — primary text on light   */
  --cw-navy-ink:   #001E3D;   /* near-black navy for dense type      */
  --cw-blue:       #1F87CE;   /* mid blue — links, info              */
  --cw-sky:        #58B8E8;   /* sky blue — secondary accent         */

  --cw-green:      #009048;   /* growth / impact                     */
  --cw-leaf:       #8FC83C;   /* lime accent — chart highlight       */

  --cw-black:      #0B0B0B;
  --cw-ink:        #1A1A1A;   /* body type                           */
  --cw-graphite:   #4A4F55;   /* secondary type                      */
  --cw-slate:      #7B8087;   /* tertiary / metadata                 */
  --cw-line:       #D9DDE2;   /* hairline rules                      */
  --cw-bone:       #F4F1EA;   /* warm off-white surface              */
  --cw-paper:      #FBF9F4;   /* page background                     */
  --cw-white:      #FFFFFF;

  /* --- Semantic ---------------------------------------------------- */
  --fg-1: var(--cw-navy-ink);
  --fg-2: var(--cw-graphite);
  --fg-3: var(--cw-slate);
  --fg-inverse: var(--cw-white);
  --link: var(--cw-blue);
  --accent: var(--cw-yellow);

  --bg-page:    var(--cw-paper);
  --bg-surface: var(--cw-white);
  --bg-muted:   var(--cw-bone);
  --bg-inverse: var(--cw-navy-ink);
  --bg-accent:  var(--cw-yellow);

  --border-hair: 1px solid var(--cw-line);
  --border-emph: 2px solid var(--cw-navy);

  /* --- Type families ---------------------------------------------- */
  --font-display: "CW Display", "Anton", "Oswald", Impact, sans-serif;
  --font-brush:   "CW Brush", "Permanent Marker", cursive;
  --font-gothic:  "CW Gothic", "Barlow Condensed", "Oswald", sans-serif;
  --font-editorial: "CW Editorial", "EB Garamond", Georgia, serif;
  --font-sans:    "CW Sans", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Type scale (modular, 1.250) -------------------------------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-44: 2.75rem;
  --fs-60: 3.75rem;
  --fs-84: 5.25rem;
  --fs-120: 7.5rem;

  /* --- Spacing scale (4px base) ----------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* --- Radii ------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Shadows ----------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 30, 61, 0.06), 0 1px 1px rgba(0, 30, 61, 0.04);
  --shadow-2: 0 6px 16px rgba(0, 30, 61, 0.08), 0 2px 4px rgba(0, 30, 61, 0.05);
  --shadow-3: 0 18px 40px rgba(0, 30, 61, 0.12), 0 4px 10px rgba(0, 30, 61, 0.06);

  /* --- Motion ------------------------------------------------------ */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
}

/* =====================================================================
   Semantic type roles
   ===================================================================== */

.cw-display,
h1.cw {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 6vw, var(--fs-120));
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.cw-brush,
.cw-script {
  font-family: var(--font-brush);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, var(--fs-84));
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--cw-yellow);
}

.cw-h1, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-60);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.cw-h2, h2 {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: var(--fs-44);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.cw-h3, h3 {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.cw-eyebrow {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cw-graphite);
}

.cw-pull,
.cw-pullquote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-32);
  line-height: 1.25;
  color: var(--fg-1);
}

.cw-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--fg-1);
  text-wrap: pretty;
}

.cw-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--fg-2);
}

.cw-meta, small {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

a, .cw-link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-1) var(--ease-out);
}
a:hover, .cw-link:hover { color: var(--cw-navy); }

code, .cw-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}