/* =================================================================
   PSI (Platform for Social Impact) — Colors & Type
   Single source of truth for brand color + typography tokens.
   ================================================================= */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Oswald";
  src: url("../fonts/Oswald.ttf") format("truetype-variations");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather-Italic.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Root tokens ---------- */
:root {
  /* === OFFICIAL PSI TOKENS (from Adobe XD Style Sheet / styles.css) === */
  --carbon-black:     #1C2A36;   /* primary dark, page chrome on navy */
  --midnight-slate:   #314659;   /* deep slate, section dark bg */
  --harbor-steel:     #6D8899;   /* primary slate-blue (logo P-mark) */
  --hs-lite:          #C0D6E3;   /* tint 1 — story card bg, stat rings */
  --hs-pastel:        #E2ECF2;   /* tint 2 — alt story card bg */
  --hs-faded:         #F5FBFF;   /* tint 3 — palest wash */
  --impact-orange:    #E79124;   /* primary accent, CTAs, wordmark — used at 100% only */
  --tinted-white:     #F5F5FA;   /* off-white for dark bg text */

  /* === Legacy aliases (kept so existing previews keep working) === */
  --psi-navy:         var(--carbon-black);
  --psi-navy-900:     #0F1820;
  --psi-navy-800:     #141F29;
  --psi-navy-700:     var(--carbon-black);
  --psi-navy-600:     var(--midnight-slate);
  --psi-navy-500:     #3F5569;
  --psi-navy-400:     #556C7F;

  --psi-orange:       var(--impact-orange);
  /* NOTE: Impact Orange is single-use. No tints, shades, or gradients. */

  /* Neutrals */
  --psi-white:        #FFFFFF;
  --psi-paper:        var(--tinted-white);
  --psi-stone-100:    var(--hs-pastel);
  --psi-stone-200:    #C7C7C7;    /* --gray-light from XD */
  --psi-stone-300:    #A0A0A0;
  --psi-stone-500:    #707070;    /* --gray-mid from XD */
  --psi-stone-700:    #3E3B34;
  --psi-ink:          #2A2A2A;    /* --text-dark from XD */

  /* Semantic (kept sparing — brand uses navy/orange as semantic signals too) */
  --psi-success:      #3A8A58;
  --psi-warning:      #9A6B1F;   /* amber — distinct from brand orange */
  --psi-danger:       #C24A3D;
  --psi-info:         #3B6E8F;

  /* Foreground / background — default (light mode) */
  --bg:               var(--psi-paper);
  --bg-raised:        #FFFFFF;
  --bg-sunken:        var(--psi-stone-100);
  --fg:               var(--psi-ink);
  --fg-muted:         var(--psi-stone-500);
  --fg-subtle:        var(--psi-stone-300);
  --border:           var(--psi-stone-200);
  --accent:           var(--psi-orange);
  --accent-fg:        #FFFFFF;

  /* Type families */
  --font-display:     "Oswald", "Arial Narrow", "Impact", sans-serif;
  --font-body:        "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-serif:       "Merriweather", Georgia, "Times New Roman", serif;
  --font-mono:        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (mobile-first, bumps at ≥960px) */
  --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-40:  2.5rem;
  --fs-56:  3.5rem;
  --fs-72:  4.5rem;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Spacing */
  --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;

  /* Radii — PSI uses modest, squared-leaning corners */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Shadows — matte, not floaty */
  --shadow-xs: 0 1px 2px rgba(20, 30, 40, 0.08);
  --shadow-sm: 0 2px 4px rgba(20, 30, 40, 0.08), 0 1px 2px rgba(20, 30, 40, 0.06);
  --shadow-md: 0 6px 16px -4px rgba(20, 30, 40, 0.14), 0 2px 4px rgba(20, 30, 40, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(20, 30, 40, 0.22), 0 4px 8px rgba(20, 30, 40, 0.06);

  /* Motion */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* Container */
  --container-w: 1200px;
  --container-px: clamp(20px, 4vw, 48px);
}

/* Dark surface (navy) — flip when a section opts in via .on-navy */
.on-navy, [data-surface="navy"] {
  --bg:        var(--psi-navy);
  --bg-raised: var(--psi-navy-600);
  --bg-sunken: var(--psi-navy-900);
  --fg:        #FFFFFF;
  --fg-muted:  #B8C3CD;
  --fg-subtle: var(--psi-navy-400);
  --border:    var(--psi-navy-500);
  --accent:    var(--psi-orange);
  --accent-fg: var(--psi-navy);
}

/* ---------- Semantic type ---------- */
html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-16); line-height: var(--lh-normal); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  margin: 0 0 1em 0;
}
.lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: var(--lh-loose);
  color: var(--fg);
}
.meta, small {
  font-size: var(--fs-14);
  color: var(--fg-muted);
}
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--carbon-black); }

/* ---------- Utility: underline-on-hover animation (brand pattern) ---------- */
.link-underline {
  position: relative;
  display: inline-block;
  border: 0;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); }