/* ============================================================
   WWCI Design System — Foundations
   White Working Class Educational Outcomes Inquiry
   ------------------------------------------------------------
   Single source of truth for color + type tokens.
   Import on any artifact: <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Bree Serif';
  src: url('fonts/BreeSerif-Regular.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('fonts/NotoSans-VariableFont.ttf') format('truetype-variations'),
       url('fonts/NotoSans-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Hero Colors (primary brand) ---------- */
  --wwci-burgundy:   #7b2649;   /* Hero — primary brand color, dominant in marks, headings, primary CTAs */
  --wwci-royal-blue: #262e61;   /* Hero — primary text, nav, secondary CTAs */

  /* ---------- Alternate Palette (for graphs, accents, secondary surfaces) ---------- */
  --wwci-teal:       #265f7b;   /* (note: brand pack lists RGB 200-69-48 which doesn't match the hex — kept hex as source of truth) */
  --wwci-amethyst:   #7753ad;
  --wwci-raw-sienna: #c47729;
  --wwci-fern-green: #578740;

  /* ---------- Neutrals ---------- */
  --wwci-white:    #ffffff;
  --wwci-paper:    #f6f4ef;   /* Off-white for warm backgrounds */
  --wwci-mist:     #ecedf2;   /* Cool tint of royal blue for subtle surfaces */
  --wwci-line:     #d8d6cf;   /* Hairline / divider on paper surfaces */
  --wwci-line-cool:#c8cbd6;   /* Hairline / divider on cool surfaces */
  --wwci-stone:    #8a8780;   /* Muted body text (de-emphasized) */
  --wwci-charcoal: #2a2a2a;   /* Near-black, used sparingly */
  --wwci-black:    #000000;

  /* ---------- Tints / shades of hero colors ---------- */
  --wwci-burgundy-90: #8d3a5b;
  --wwci-burgundy-80: #9e4f6e;
  --wwci-burgundy-15: #f1e3e9;   /* tint for highlights, subtle backgrounds */
  --wwci-burgundy-08: #f8eef2;

  --wwci-blue-90:    #3a416f;
  --wwci-blue-80:    #4d5380;
  --wwci-blue-15:    #e0e2ec;
  --wwci-blue-08:    #eff0f4;

  /* ---------- Semantic foreground / background ---------- */
  --fg1: var(--wwci-royal-blue);     /* Primary text — never pure black */
  --fg2: var(--wwci-charcoal);       /* Body text, slightly softer */
  --fg3: var(--wwci-stone);          /* Captions, meta, secondary */
  --fg-inverse: var(--wwci-white);
  --fg-accent: var(--wwci-burgundy);

  --bg1: var(--wwci-white);          /* Default page surface */
  --bg2: var(--wwci-paper);          /* Section break / warm */
  --bg3: var(--wwci-mist);           /* Subtle cool tint */
  --bg-accent: var(--wwci-burgundy);
  --bg-deep: var(--wwci-royal-blue); /* Nav bar, footers, deep panels */

  --line: var(--wwci-line);
  --line-cool: var(--wwci-line-cool);

  /* ---------- Status (not in source brand pack — derived from alt palette) ---------- */
  --success: var(--wwci-fern-green);
  --warning: var(--wwci-raw-sienna);
  --info:    var(--wwci-teal);

  /* ---------- Typography stacks ---------- */
  --font-serif:  'Bree Serif', Georgia, 'Times New Roman', serif;
  --font-sans:   'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (REM-based; root = 16px) ---------- */
  --fs-display: 4.5rem;  /* 72px — hero / cover */
  --fs-h1:      3rem;    /* 48px */
  --fs-h2:      2.25rem; /* 36px */
  --fs-h3:      1.625rem;/* 26px */
  --fs-h4:      1.25rem; /* 20px */
  --fs-lead:    1.25rem; /* 20px — lead paragraph */
  --fs-body:    1rem;    /* 16px — body */
  --fs-small:   0.875rem;/* 14px */
  --fs-caption: 0.75rem; /* 12px */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --letter-tight:  -0.01em;
  --letter-normal: 0;
  --letter-wide:   0.04em;
  --letter-xwide:  0.12em;  /* For all-caps eyebrows */

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

  /* ---------- Radii (the brand sits comfortably with sharp corners; rounded only on focused elements) ---------- */
  --radius-0: 0;        /* default — squared buttons, cards, blocks */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* ---------- Shadows (drop shadow per brand: soft, dark, slightly offset down-right) ---------- */
  --shadow-1: 0 2px 4px rgba(38, 46, 97, 0.10);
  --shadow-2: 6px 6px 0 rgba(38, 46, 97, 0.18);   /* Signature: hard offset, no blur, matches button style */
  --shadow-3: 0 8px 24px rgba(38, 46, 97, 0.18);
  --shadow-inset: inset 0 -3px 0 rgba(0, 0, 0, 0.08);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}

/* ============================================================
   Semantic typography classes — apply directly to elements
   ============================================================ */

.wwci-display, .wwci-h1, .wwci-h2, .wwci-h3, .wwci-h4 {
  font-family: var(--font-serif);
  color: var(--fg1);
  letter-spacing: var(--letter-normal);
  text-wrap: balance;
  margin: 0;
}

.wwci-display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--letter-tight);
}
.wwci-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight);   text-transform: uppercase; }
.wwci-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.wwci-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.wwci-h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 700; }

.wwci-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-xwide);
  color: var(--fg-accent);
}

.wwci-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-base);
  color: var(--fg1);
  text-wrap: pretty;
}

.wwci-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg2);
  text-wrap: pretty;
}

.wwci-body-light {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg2);
}

.wwci-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--fg3);
}

.wwci-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
}

/* Strong / emphasis — Noto Sans bold per brand pack */
.wwci-body strong, .wwci-body-light strong, .wwci-lead strong { font-weight: 700; color: var(--fg1); }
.wwci-body em, .wwci-body-light em { font-style: italic; }

/* Base resets that apply to the document */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg2);
  background: var(--bg1);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--wwci-burgundy);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--wwci-burgundy-80); }