/* Deliberate Sherpa — design tokens (Gate 2 draft, v2)
   Alpine / ski direction: bluebird sky + snow ground, deep cobalt structure,
   one lime spark. Sans-only geometric type. All colors here; no hardcoded hex
   in components. Old chalet names kept as aliases so components remap cleanly. */

:root {
  /* ---- Color: alpine / ski (founder-supplied palette) ---- */
  --snow:      #F4F8FB;   /* page ground (cool snow white) */
  --paper:     #FFFFFF;   /* raised surface / cards */
  --paper-2:   #FBFDFF;   /* highest surface / inputs */
  --mist:      #D7DFE8;   /* cool secondary surface / section tint */
  --sky:       #90BDE1;   /* sky blue */
  --periwinkle:#8CA4CC;   /* muted blue — silhouettes, secondary */
  --cobalt:    #04448C;   /* deep alpine blue — PRIMARY structure/accent */
  --cobalt-700:#05346B;   /* pressed / hover-dark */
  --cobalt-300:#3E6FB0;   /* lighter cobalt */
  --lime:      #A1C42C;   /* the spark — used once, boldly (hero CTA, “now”) */
  --lime-700:  #6E8A16;   /* AA-safe lime for text */
  --slate:     #54637C;   /* muted label/caption text (AA on snow) */
  --ink:       #122238;   /* dark navy text (never pure black) */

  --ink-90: rgba(18,34,56,.92);
  --ink-70: rgba(18,34,56,.68);
  --ink-50: rgba(18,34,56,.52);
  --line:   rgba(18,34,56,.12);
  --line-2: rgba(18,34,56,.07);
  --on-dark:      #F4F8FB;              /* text on cobalt/hero */
  --on-dark-70:   rgba(244,248,251,.78);
  --scrim:        rgba(4,34,72,.28);    /* legibility scrim over art */

  /* Year colors — one per grade, reused across the experience to differentiate years.
     Founder-supplied set (2026-07-02), Freshman -> University. */
  --yr-fresh:  #C0392B;   /* Freshman  — red   (NOTE: red; see DECISIONS D26 / brand no-red rule) */
  --yr-soph:   #8E44AD;   /* Sophomore — purple */
  --yr-junior: #27AE60;   /* Junior    — green */
  --yr-senior: #2980B9;   /* Senior    — blue */
  --yr-univ:   #2C3E50;   /* University — midnight slate */

  /* Back-compat aliases (chalet → alpine) */
  --snowfield: var(--snow);
  --pine: var(--cobalt); --pine-600: var(--cobalt-700); --pine-300: var(--periwinkle);
  --timber: var(--slate);
  --ochre: var(--lime); --ochre-ink: var(--lime-700);
  --sage: var(--mist); --sage-deep: #B9C6D6;

  /* ---- Type: sans-only geometric (Gotham as adjective) ---- */
  --font-sans: "Figtree", "Chivo", ui-sans-serif, sans-serif;
  --font-alt:  "Chivo", "Figtree", ui-sans-serif, sans-serif;

  --t-eyebrow: 0.8125rem;
  --t-small:   0.9375rem;
  --t-body:    1.0625rem;
  --t-lead:    clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --t-h3:      clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
  --t-h2:      clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  --t-h1:      clamp(2.4rem, 1.8rem + 3.2vw, 4rem);
  --t-hero:    clamp(2.7rem, 1.8rem + 4.4vw, 4.9rem);

  --lh-tight: 1.05; --lh-snug: 1.16; --lh-body: 1.6;
  --tracking-tight: -0.02em; --tracking-eyebrow: 0.14em;

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

  /* ---- Radius ---- */
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-pill:999px;

  /* ---- Shadow: soft, cool navy-tinted ---- */
  --shadow-sm: 0 1px 2px rgba(18,34,56,.06), 0 2px 8px rgba(18,34,56,.06);
  --shadow-md: 0 8px 24px rgba(18,34,56,.09), 0 2px 6px rgba(18,34,56,.06);
  --shadow-lg: 0 18px 48px rgba(18,34,56,.12), 0 6px 16px rgba(18,34,56,.07);

  /* ---- Layout / motion ---- */
  --maxw: 1200px; --measure: 62ch;
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-1:140ms; --dur-2:220ms; --dur-3:520ms;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--snow); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body);
  font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3 { line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; font-weight: 800; }
p { margin: 0; }
a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--cobalt-300); outline-offset: 2px; border-radius: 4px; }

.eyebrow { font-size: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; font-weight: 700; color: var(--slate); }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}