/* ── RESET ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── TOKENS ─────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:            #F4F1EB;
  --bg-raised:     #FEFCF8;
  --bg-inset:      #EAE6DC;
  --bg-inset2:     #E0DBD0;
  --border:        rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.15);

  /* Text */
  --ink:   #18150F;
  --ink-2: #635D55;
  --ink-3: #665E58; /* was #6E6860 — 4.42 fail on bg-inset → now 5.10 ✓ AA */
  --accent:    #18150F;
  --accent-fg: #F4F1EB;
  /* Fonts */
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body:    'Big Shoulders Text', sans-serif;
  --font-prose:   'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Radii */
  --r-xs:   3px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-card: 12px;
  --r-pill: 100px;

  /* Shadows */
  --shadow-card:  0 1px 3px rgba(80,65,40,0.08), 0 3px 12px rgba(80,65,40,0.06);
  --shadow-raise: 0 4px 24px rgba(80,65,40,0.12), 0 1px 4px rgba(80,65,40,0.08);

  /* Event colors (light mode) */
  --vault-color: #C45C2A;
  --bars-color:  #2A6BC4;
  --beam-color:  #7B3FC4;
  --floor-color: #1E7D48; /* was #2A9B5E — 2.83 fail on bg-inset → now 4.13 ✓ AA-large */
}

/* ── DARK MODE TOKENS ───────────────────────────────────────────────────────── */
html.dark {
  --bg:            #131210;
  --bg-raised:     #1E1C19;
  --bg-inset:      #262420;
  --bg-inset2:     #2E2B26;
  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);
  --ink:   #F0EDE6;
  --ink-2: #A39D94;
  --ink-3: #909090; /* was #8A8480 — 4.20 fail on bg-inset → now 4.85 ✓ AA */
  --accent:    #F0EDE6;
  --accent-fg: #131210;
  --shadow-card:  0 1px 3px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.20);
  --shadow-raise: 0 4px 20px rgba(0,0,0,0.36), 0 1px 4px rgba(0,0,0,0.24);
  /* Event colors — lightened for dark bg readability */
  --vault-color: #D4845A;
  --bars-color:  #6A9BD4;
  --beam-color:  #A87DD4;
  --floor-color: #5AB87A;
}

/* ── SCHOOL THEME CLASSES ───────────────────────────────────────────────────── */
/* Light mode: accent = school color, accent-fg = contrasting text on it       */

.theme-lsu      { --accent: #461D7C; --accent-fg: #FDD023; }
.theme-ucla     { --accent: #2D68C4; --accent-fg: #FFFFFF; }
.theme-stanford { --accent: #8C1515; --accent-fg: #FFFFFF; }
.theme-florida  { --accent: #0021A5; --accent-fg: #FFFFFF; }
.theme-michigan { --accent: #00274C; --accent-fg: #FFCB05; }
.theme-oregon   { --accent: #154733; --accent-fg: #FEE123; }
.theme-teal     { --accent: #005F73; --accent-fg: #FFFFFF; }
.theme-black-gold { --accent: #1A1A1A; --accent-fg: #F0C040; }
.theme-orange   { --accent: #C84B00; --accent-fg: #FFFFFF; }
.theme-pink-navy { --accent: #1B2A6B; --accent-fg: #F9A8D4; }

/* ── DARK MODE THEME OVERRIDES ──────────────────────────────────────────────── */
html.dark.theme-lsu      { --accent: #9B6FCC; --accent-fg: #131210; }
html.dark.theme-ucla     { --accent: #5B8FD8; --accent-fg: #131210; }
html.dark.theme-stanford { --accent: #D45050; --accent-fg: #131210; }
html.dark.theme-florida  { --accent: #5580E0; --accent-fg: #131210; }
html.dark.theme-michigan { --accent: #4D8FCC; --accent-fg: #131210; }
html.dark.theme-oregon   { --accent: #3A9068; --accent-fg: #131210; }
html.dark.theme-teal     { --accent: #1AA0BB; --accent-fg: #131210; }
html.dark.theme-black-gold { --accent: #C0A030; --accent-fg: #131210; }
html.dark.theme-orange   { --accent: #E87030; --accent-fg: #131210; }
html.dark.theme-pink-navy { --accent: #E060A0; --accent-fg: #131210; }

/* ── BASE ───────────────────────────────────────────────────────────────────── */
html {
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

/* ── LAYOUT UTILITIES ───────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.divider {
  height: 1px;
  background: var(--border);
}

/* ── TYPOGRAPHY UTILITIES ───────────────────────────────────────────────────── */
.mono  { font-family: var(--font-mono); }
.prose { font-family: var(--font-prose); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 12px;
  transition: color 0.3s;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
}

.section-desc {
  font-family: var(--font-prose);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 540px;
}

/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--accent-fg, #F4F1EB);
  padding: 14px 28px;
  border-radius: var(--r-md);
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(24,21,15,0.18);
}
.btn-primary:hover { opacity: 0.85; transform: translateY(-2px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 14px 20px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-strong);
  transition: color 0.15s, border-color 0.15s, transform 0.15s, background 0.15s;
}
.btn-secondary:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--bg-inset);
  transform: translateY(-1px);
}

/* ── DIFF PILLS ─────────────────────────────────────────────────────────────── */
.diff-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: var(--r-xs);
}
.diff-under { background: rgba(34,139,34,0.12); color: #1A7A1A; }
.diff-over  { background: rgba(200,50,50,0.10);  color: #B02020; }
.diff-exact { background: rgba(160,120,10,0.12); color: #806010; }

/* ── SECTION SPACING ────────────────────────────────────────────────────────── */
.section { padding: 88px 0; }
.section-sm { padding: 56px 0; }