/* R3 slice 1/14 (00-foundations.css) — extracted VERBATIM from styles.css lines 1-292.
   reset, :root design tokens, body.dark tokens, base elements, .card, .shell, mobile nav drawer chrome.
   Link order in index.html is load-bearing: cascade tie-breaks depend on it. Do not reorder. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:root {
  --bg: var(--main-bg);
  --bg-glow-1: rgba(0, 162, 99, .07);
  --bg-glow-2: rgba(95, 75, 182, .04);
  --bg-glow-3: rgba(0, 100, 50, .04);

  --card-start: var(--surface);
  --card-end:   var(--surface);
  --card-rim:   transparent;
  --card-border: var(--border);
  --card-shadow: var(--shadow-card);
  --blur: none;

  --ink: #16201A;
  --ink-mid: #4A544B;
  /* Darkened from #7C8579 (3.66:1) to meet WCAG AA 4.5:1 on the light --surface
     (#FBFAF6 -> 4.77:1); the dark-mode --muted already passes (4.69:1). */
  --muted: #6A7268;
  --hairline: rgba(22, 32, 26, .10);
  --hover-bg: rgba(22, 32, 26, .04);
  --active-bg: rgba(22, 32, 26, .06);

  --green: #00A24B;
  --green-soft: #0cbf63;
  --green-dim: rgba(0, 162, 75, .45);
  --red: #D6453B;
  --amber: #EBA433;
  --violet: #6E62D6;

  --nav-active-border: rgba(20, 36, 27, .07);
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 78px;

  /* ---------- Redesign foundation tokens (added 2026-06-27, PR-1) ---------- */
  --main-bg:        #EDE9E0;
  --surface:        #FBFAF6;
  --surface-2:      #F3EFE6;
  --ink-soft:       #4A544B;
  --border:         rgba(22, 32, 26, .10);
  --border-strong:  rgba(22, 32, 26, .18);
  --chip:           rgba(22, 32, 26, .05);
  --bar-track:      rgba(22, 32, 26, .07);

  --accent:         #00A24B;
  --accent-ink:     #018442;
  --accent-soft:    rgba(0, 162, 75, .12);

  --danger:         #D6453B;
  --danger-soft:    rgba(214, 69, 59, .08);
  --danger-border:  rgba(214, 69, 59, .22);

  --sidebar-bg:        #14201A;
  --sidebar-ink:       #EDEAE1;
  --sidebar-dim:       #9BA79D;
  --sidebar-border:    rgba(255, 255, 255, .07);
  --sidebar-hover:     rgba(255, 255, 255, .06);
  --sidebar-active-bg: rgba(0, 162, 75, .18);

  --topbar-bg:      rgba(237, 233, 224, .72);

  --shadow-card:    0 18px 40px -36px rgba(22, 32, 26, .5);
  --shadow-hover:   0 26px 50px -30px rgba(22, 32, 26, .45);

  --font-display-new: "Archivo", "Outfit", system-ui, sans-serif;
  --font-body-new:    "Hanken Grotesk", system-ui, sans-serif;
  --mono:             "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* Auth hero gradient stops (always dark in both themes). */
  --hero-1:           #16201A;
  --hero-2:           #0B120E;

  /* ---------- Phantom-token aliases (added 2026-06-28) ----------
     ~295 legacy references across app.js + styles.css use these names,
     which were never defined (resolved to invalid -> inherited/initial,
     so surfaces looked wrong in dark). Map them to real tokens. Per
     docs/design/02 §2: the block MUST be repeated under body.dark below
     so the var() re-resolves against the dark token values (an alias
     declared only on :root freezes to the light value and never flips).
     For new code, prefer the canonical names, not these aliases. */
  --text:         var(--ink);
  --text-color:   var(--ink);
  --text-muted:   var(--muted);
  --border-color: var(--card-border);
  --bg-card:      var(--card-start);
  --bg-hover:     var(--hover-bg);
  --surface-soft: var(--hover-bg);

  /* ---------- Landing wizard (--sft-*) tokens — LIGHT mode ----------
     Mirror of the body.dark block below. The .sft-sim__* circular stepper was
     ported onto the authenticated Sponsor-a-school wizard, but landing.css only
     defines --sft-* on .sft-landing. Off the landing (the donor wizard) they
     were undefined in light mode, so the stepper rendered uncoloured (the
     "reverted" look). Map them to the real theme tokens here. On the landing,
     .sft-landing re-declares these (and loads after this file), so the landing
     surface is unaffected. */
  --sft-ink:        var(--ink);
  --sft-ink-3:      var(--ink-soft);
  --sft-muted-3:    var(--muted);
  --sft-surface:    var(--surface);
  --sft-line:       var(--border);
  --sft-green:      var(--accent);
  --sft-green-deep: var(--accent-ink);
  --sft-mint:       var(--accent);
}

body.dark {
  --bg: var(--main-bg);
  --bg-glow-1: rgba(0, 196, 86, .13);
  --bg-glow-2: rgba(95, 75, 182, .11);
  --bg-glow-3: rgba(0, 80, 40, .08);

  --card-start: var(--surface);
  --card-end:   var(--surface);
  --card-rim:   transparent;
  --card-border: var(--border);
  --card-shadow: var(--shadow-card);
  --blur: blur(16px) saturate(140%);

  --ink: #F4F1E9;
  --ink-mid: #AEB8AC;
  --muted: #7E897E;
  --hairline: rgba(255, 255, 255, .08);
  --hover-bg: rgba(247, 255, 250, .04);
  --active-bg: rgba(247, 255, 250, .07);

  --green: #00A24B;
  --green-soft: #0cbf63;
  --green-dim: rgba(0, 162, 75, .55);
  --red: #FF6B61;
  --amber: #E8B95E;
  --nav-active-border: rgba(247, 255, 250, .07);

  /* ---------- Redesign foundation tokens — dark overrides (PR-1) ---------- */
  --main-bg:        #0B120E;
  --surface:        #141E18;
  --surface-2:      #10180F;
  --ink-soft:       #AEB8AC;
  --border:         rgba(255, 255, 255, .08);
  --border-strong:  rgba(255, 255, 255, .16);
  --chip:           rgba(255, 255, 255, .06);
  --bar-track:      rgba(255, 255, 255, .07);

  --accent:         #00A24B;
  --accent-ink:     #3FD489;
  --accent-soft:    rgba(0, 162, 75, .16);

  --danger:         #FF6B61;
  --danger-soft:    rgba(255, 107, 97, .12);
  --danger-border:  rgba(255, 107, 97, .28);

  --sidebar-bg:        #080F0B;
  --sidebar-ink:       #D5DCD2;
  --sidebar-dim:       #828E84;
  --sidebar-hover:     rgba(255, 255, 255, .05);
  --sidebar-active-bg: rgba(0, 162, 75, .16);

  --topbar-bg:      rgba(11, 18, 14, .72);

  --shadow-card:    0 18px 40px -34px rgba(0, 0, 0, .7);
  --shadow-hover:   0 28px 56px -30px rgba(0, 0, 0, .8);

  /* Phantom-token aliases re-declared so they re-resolve against the dark
     token values above (see :root block + docs/design/02 §2). */
  --text:         var(--ink);
  --text-color:   var(--ink);
  --text-muted:   var(--muted);
  --border-color: var(--card-border);
  --bg-card:      var(--card-start);
  --bg-hover:     var(--hover-bg);
  --surface-soft: var(--hover-bg);

  /* Landing wizard (--sft-*) tokens, mapped to the real theme tokens so the
     .sft-sim__* stepper (ported onto the authenticated Sponsor-a-school page)
     renders correctly in dark. landing.css defines these as light literals at
     :root; on the landing they stay light because --ink etc. are pinned light
     by body.sft-landing-active (which outranks body.dark). */
  --sft-ink:        var(--ink);
  --sft-ink-3:      var(--ink-soft);
  --sft-muted-3:    var(--muted);
  --sft-surface:    var(--surface);
  --sft-line:       var(--border);
  --sft-green:      var(--accent);
  --sft-green-deep: var(--accent-ink);
  --sft-mint:       var(--accent);
}

/* The stepper's landing styles hardcode light values; correct them for dark. */
body.dark .sft-sim__track { background: rgba(255, 255, 255, .14); }
body.dark .sft-sim__dot { border-color: rgba(255, 255, 255, .16); }   /* visible idle outline */
body.dark .sft-sim__dot.is-done { color: var(--surface); }            /* dark number on the light "done" dot */

body {
  font-family: var(--font-body-new);
  background: var(--main-bg);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  transition: background .35s, color .25s;
  color-scheme: light;
}

body.dark {
  color-scheme: dark;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .25s;
}

.card.interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-strong);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card.interactive:hover {
    transition: none;
    transform: none;
  }
}

.shell {
  width: 100vw;
  height: 100vh;
  display: flex;
  padding: 0;
  gap: 0;
}

/* Mobile nav drawer chrome — hidden on desktop, activated <=600px.
   Scoped to .topbar so it outranks .ibtn { display: flex }. */
.topbar .nav-toggle {
  display: none;
}

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(8, 12, 10, .5);
}