/* ==========================================================================
   Stanford × AI-Accelerated Brain Research (SAABR)
   Design tokens — colors, type, spacing
   Sourced from Stanford 2023 Identity Guide
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand red (Cardinal) ---------- */
  --c-cardinal: #8C1515;        /* PMS 201C — primary on print */
  --c-cardinal-dark: #820000;   /* deeper shade */
  --c-cardinal-bright: #B83A4B; /* lighter cardinal accent */
  --c-digital-red: #B1040E;     /* digital red, AA-tested */
  --c-digital-red-light: #E50808;

  /* ---------- Neutrals ---------- */
  --c-black: #2E2D29;           /* "Process Black" warm */
  --c-white: #FFFFFF;
  --c-cool-grey: #53565A;       /* PMS Cool Gray 11 */
  --c-grey-90: #43423E;
  --c-grey-80: #585754;
  --c-grey-70: #6D6C69;
  --c-grey-60: #767674;
  --c-grey-50: #979694;
  --c-grey-40: #ABABA9;
  --c-grey-30: #C0C0BF;
  --c-grey-20: #D5D5D4;
  --c-grey-10: #EAEAEA;
  --c-fog: #DAD7CB;             /* warm cream/sand */
  --c-stone: #7F7776;
  --c-fog-light: #F4F4F4;

  /* ---------- Web-interactive accents ---------- */
  --c-digital-blue: #006CB8;
  --c-digital-blue-dark: #00548F;
  --c-digital-blue-light: #6FC3FF;
  --c-digital-green: #008566;
  --c-digital-green-dark: #006F54;
  --c-digital-green-light: #1AECBA;

  /* ---------- Accent palette ---------- */
  --c-palo-alto: #175E54;       /* deep evergreen */
  --c-palo-verde: #279989;      /* teal */
  --c-olive: #8F993E;
  --c-poppy: #E98300;           /* warm orange */
  --c-illuminating: #FEDD5C;    /* yellow */
  --c-spirited: #E04F39;        /* coral red */
  --c-plum: #620059;
  --c-bay: #77A68A;
  --c-brick: #651C32;
  --c-sky: #4298B5;
  --c-archway: #5D4B3C;
  --c-lagunita: #007C92;

  /* ---------- Semantic — SAABR section ---------- */
  --bg-page: #FFFFFF;
  --bg-elevated: #FAFAF8;
  --bg-canvas: #F4F4F4;
  --bg-ink: #2E2D29;
  --bg-cardinal: #8C1515;

  --ink-primary: #2E2D29;
  --ink-secondary: #53565A;
  --ink-tertiary: #767674;
  --ink-on-dark: #FFFFFF;
  --ink-on-cardinal: #FFFFFF;

  --rule-hairline: rgba(46, 45, 41, 0.12);
  --rule-strong: rgba(46, 45, 41, 0.32);
  --rule-on-dark: rgba(255, 255, 255, 0.16);

  /* ---------- Type ---------- */
  --f-sans: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --f-mono: "Roboto Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Modular scale, base 16px → 1.25 ratio for marketing/editorial */
  --t-display-xxl: clamp(56px, 7.5vw, 112px);
  --t-display-xl: clamp(44px, 5.5vw, 84px);
  --t-display-l:  clamp(36px, 4.2vw, 64px);
  --t-h1: clamp(30px, 3.0vw, 44px);
  --t-h2: clamp(24px, 2.2vw, 32px);
  --t-h3: 22px;
  --t-h4: 18px;
  --t-eyebrow: 12px;
  --t-body-l: 19px;
  --t-body: 17px;
  --t-body-s: 15px;
  --t-caption: 13px;
  --t-micro: 11px;

  /* Line-heights */
  --lh-display: 1.02;
  --lh-tight: 1.12;
  --lh-snug: 1.25;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  /* Letter-spacing — Stanford uses very tight display tracking */
  --ls-display: -0.022em;
  --ls-tight: -0.012em;
  --ls-normal: 0;
  --ls-eyebrow: 0.14em;
  --ls-micro: 0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  --gutter: clamp(24px, 4vw, 64px);
  --max-w: 1320px;
  --max-w-prose: 68ch;

  /* ---------- Radii ---------- */
  --r-0: 0;
  --r-1: 2px;       /* default — Stanford prefers near-square corners */
  --r-2: 4px;
  --r-pill: 999px;

  /* ---------- Shadows — used very sparingly ---------- */
  --shadow-1: 0 1px 2px rgba(46,45,41,0.06), 0 0 0 1px rgba(46,45,41,0.06);
  --shadow-2: 0 8px 24px rgba(46,45,41,0.08), 0 0 0 1px rgba(46,45,41,0.06);
  --shadow-cardinal: 0 12px 32px rgba(140,21,21,0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 140ms;
  --d-base: 220ms;
  --d-slow: 420ms;
}

/* ---------- Base reset (scoped, opt-in via .saabr-reset on <html> or wrapper) ---------- */
.saabr-reset, .saabr-reset * { box-sizing: border-box; }
.saabr-reset {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.saabr-reset h1, .saabr-reset h2, .saabr-reset h3, .saabr-reset h4 { margin: 0; }
.saabr-reset p { margin: 0; }
.saabr-reset a { color: var(--c-digital-red); text-decoration: none; }
.saabr-reset a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Type utilities ---------- */
.t-display-xxl { font-family: var(--f-serif); font-weight: 400; font-size: var(--t-display-xxl); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-display-xl  { font-family: var(--f-serif); font-weight: 400; font-size: var(--t-display-xl);  line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-display-l   { font-family: var(--f-serif); font-weight: 400; font-size: var(--t-display-l);   line-height: var(--lh-tight);   letter-spacing: var(--ls-tight); }
.t-h1 { font-family: var(--f-sans); font-weight: 600; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-h2 { font-family: var(--f-sans); font-weight: 600; font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.t-h3 { font-family: var(--f-sans); font-weight: 600; font-size: var(--t-h3); line-height: var(--lh-snug); }
.t-h4 { font-family: var(--f-sans); font-weight: 600; font-size: var(--t-h4); line-height: var(--lh-snug); }
.t-body-l { font-family: var(--f-sans); font-size: var(--t-body-l); line-height: var(--lh-body); }
.t-body   { font-family: var(--f-sans); font-size: var(--t-body);   line-height: var(--lh-body); }
.t-body-s { font-family: var(--f-sans); font-size: var(--t-body-s); line-height: var(--lh-body); }
.t-serif-body { font-family: var(--f-serif); font-size: 18px; line-height: 1.6; }
.t-eyebrow {
  font-family: var(--f-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.t-mono { font-family: var(--f-mono); font-size: var(--t-caption); letter-spacing: 0.02em; }

/* Drop-cap helper for editorial intros */
.dropcap::first-letter {
  font-family: var(--f-serif);
  font-weight: 500;
  float: left;
  font-size: 5.6em;
  line-height: 0.85;
  margin: 0.04em 0.08em 0 -0.04em;
  color: var(--c-cardinal);
}