/* =====================================================================
   Testy — Design Tokens
   Synthesized from coolors.io palettes (Winter Chill, Salt & Pepper,
   Cobalt Sky, Quiet Luxury, Morning Dew). Tech-forward teal + cobalt
   on near-black ink. Minimal, Linear-ish.
   ===================================================================== */

/* --- Fonts -----------------------------------------------------------
   Newsreader   — academic serif display (Google Fonts)
   Geist        — clean modern grotesque body sans (Google Fonts)
   Geist Mono   — numeric/code/timer accents (Google Fonts)
   All free, OFL. Stored in /fonts/ as local backup; @import below
   uses Google Fonts CDN for the live runtime.
*/
@import url("fonts/fonts.css");

:root {
  /* ─── Brand palette ─────────────────────────────────────────────── */
  --ink-900: #0B2E33;   /* near-black teal, primary brand + body text */
  --ink-800: #143A40;
  --ink-700: #1F4D54;
  --teal-600: #4F7C82;  /* slate teal, secondary brand */
  --teal-500: #6B9398;
  --teal-300: #93B1B5;
  --teal-200: #B8E3E9;  /* mist, surfaces + chips */
  --teal-100: #DCEFF1;
  --teal-050: #F1F8F9;

  --cobalt-700: #003585;
  --cobalt-600: #0047AB;  /* CTA accent — used sparingly */
  --cobalt-500: #1E62C6;
  --cobalt-100: #DCE7F6;

  --cream-200: #F7E6CA;   /* warm surface — callouts, "warmer" panels */
  --cream-100: #FAF1DD;
  --cream-050: #FDF8EE;

  /* ─── Neutrals (Salt & Pepper, extended) ───────────────────────── */
  --white:    #FFFFFF;
  --paper:    #FAFAF7;    /* page background — off-white, subtle warm */
  --paper-2:  #F4F4F0;    /* alt panel background */
  --line-100: #ECECE6;
  --line-200: #D4D4D0;
  --line-300: #B3B3AE;
  --gray-500: #6E6E68;
  --gray-700: #46463F;
  --gray-900: #2B2B2B;

  /* ─── Semantic colors ──────────────────────────────────────────── */
  --success-700: #2D6A4F;
  --success-500: #4FA37B;
  --success-200: #C5E9D6;
  --success-050: #ECF7F0;

  --warning-700: #8A5A14;
  --warning-500: #C68B2C;
  --warning-200: #F2DDA6;
  --warning-050: #FBF3DE;

  --danger-700: #8C2A1A;   /* added — exam UIs require an unambiguous
                              error color, not present in source palettes.
                              FLAG: see README VISUAL FOUNDATIONS. */
  --danger-500: #C8553D;
  --danger-200: #F2C8BD;
  --danger-050: #FBE9E3;

  --info-500: var(--cobalt-600);
  --info-200: var(--cobalt-100);

  /* ─── Semantic surface / fg tokens ─────────────────────────────── */
  --bg:        #F1F8F9;
  --bg-elev:   #FFFFFF;
  --bg-warm:   var(--cream-050);
  --bg-cool:   var(--teal-050);
  --bg-invert: var(--ink-900);

  --fg-1:      var(--ink-900);
  --fg-2:      #3A5458;
  --fg-3:      #5A7880;
  --fg-mute:   var(--line-300);
  --fg-invert: var(--paper);

  --brand:     var(--ink-900);
  --brand-2:   var(--teal-600);
  --accent:    #4F7C82;

  --border:    #D4E8EC;
  --border-strong: #B8D4D8;
  --ring:      #4F7C82;

  /* ─── Type families ────────────────────────────────────────────── */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Geist", ui-sans-serif, -apple-system, "Segoe UI",
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono",
                  Menlo, Consolas, monospace;

  /* ─── Type scale (Linear-ish: tight, restrained) ───────────────── */
  --fs-3xs:  11px;
  --fs-2xs:  12px;
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  60px;
  --fs-5xl:  80px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

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

  /* ─── Radii (subtle / option 2: 4px family) ────────────────────── */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-pill: 999px;

  /* ─── Elevation (very restrained; no big drop shadows) ─────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(11, 46, 51, 0.04),
              0 1px 2px rgba(11, 46, 51, 0.05);
  --shadow-2: 0 1px 0 rgba(11, 46, 51, 0.04),
              0 2px 6px rgba(11, 46, 51, 0.06),
              0 8px 20px -8px rgba(11, 46, 51, 0.08);
  --shadow-3: 0 2px 8px rgba(11, 46, 51, 0.08),
              0 16px 32px -12px rgba(11, 46, 51, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                  inset 0 -1px 0 rgba(11, 46, 51, 0.04);
  --focus-ring: 0 0 0 3px rgba(79,124,130,.28);

  /* ─── Motion ───────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --dur-4: 400ms;

  /* ─── Layout ───────────────────────────────────────────────────── */
  --section-gap: var(--sp-10);
  --row-y:       var(--sp-4);
  --hero-pt:     var(--sp-11);

  --container: 1200px;
  --container-narrow: 880px;
  --grid-gutter: var(--sp-6);
}

/* =====================================================================
   Semantic element styles
   ===================================================================== */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); font-weight: 500; }
h2 { font-size: var(--fs-3xl); font-weight: 500; }
h3 { font-size: var(--fs-2xl); font-weight: 500; letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--fs-xl);  font-weight: 600; letter-spacing: var(--tracking-snug); }
h5 { font-size: var(--fs-lg);  font-weight: 600; font-family: var(--font-sans); letter-spacing: 0; }
h6 { font-size: var(--fs-md);  font-weight: 600; font-family: var(--font-sans); letter-spacing: 0; }

p { margin: 0; color: var(--fg-2); line-height: var(--lh-normal); text-wrap: pretty; }

/* Utility / signature text styles */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.0;
}

.lede {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-3);
  letter-spacing: 0;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--line-200);
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease-std),
              text-decoration-color var(--dur-1) var(--ease-std);
}
a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

::selection {
  background: var(--teal-200);
  color: var(--ink-900);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}