/* ============================================================
   DESIGN TOKENS — edit these to restyle the whole site.
   Every other stylesheet (home/guide/fundamentals.css) reads
   from these variables instead of hardcoding values.
   ============================================================ */
:root {
  /* ── Color — Championship red & gold ───────────────────────
     Base surfaces run warm near-black instead of blue-black;
     --accent/--danger alias the brand pair below so every
     component that already reads var(--accent)/var(--danger)
     picks up the new palette automatically. */
  --bg:       #0b0908;
  --bg2:      #120e0c;
  --surface:  #1a1512;
  --surface2: #221b16;
  --surface3: #2b2219;
  --line:     rgba(255,255,255,0.08);
  --line2:    rgba(255,255,255,0.15);
  --t1:  #f7f2ec;
  --t2:  #ab9d8f;
  --t3:  #8f8171;

  --gold:     #f2b229;
  --gold-d:   rgba(242,178,41,0.14);
  --gold-b:   rgba(242,178,41,0.34);
  --red:      #e0303f;
  --red-d:    rgba(224,48,63,0.14);
  --red-b:    rgba(224,48,63,0.34);
  --gradient-brand: linear-gradient(135deg, var(--red), var(--gold));

  --accent:   var(--gold);
  --accent-d: var(--gold-d);
  --accent-b: var(--gold-b);
  --danger:   var(--red);
  --danger-d: var(--red-d);
  --danger-b: var(--red-b);
  --ok:       #4ade80;
  --ok-d:     rgba(74,222,128,0.08);
  --ok-b:     rgba(74,222,128,0.20);
  --warn:     #f0a020;
  --warn-d:   rgba(240,160,32,0.08);
  --warn-b:   rgba(240,160,32,0.24);

  --glow-1:   rgba(224,48,63,0.16);
  --glow-2:   rgba(242,178,41,0.12);
  --shadow-strong: rgba(0,0,0,.6);

  /* ── Type ───────────────────────────────────────────────── */
  --font-sans:    'SF Pro Text','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-display: 'SF Pro Display','Segoe UI',system-ui,sans-serif;
  --font-mono:    'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;

  /* Body copy runs on --text-base (14px); everything else is a step
     off that scale. Bump --text-base to rescale reading text sitewide. */
  --text-2xs:  10px;  /* stat keys, micro labels, season tag */
  --text-xs:   11px;  /* tab nav, buttons, filter reset */
  --text-sm:   12px;  /* secondary copy — card subtitles, meta */
  --text-base: 13px;  /* tertiary body copy — leads/threats/misplay text */
  --text-md:   14px;  /* primary reading copy — descriptions */
  --text-lg:   15px;  /* tile titles */
  --text-xl:   16px;  /* empty-state headings */
  --text-2xl:  17px;  /* card titles */
  --text-3xl:  22px;  /* section icons */

  /* ── Layout ─────────────────────────────────────────────── */
  --container-wide: 1080px; /* topbar, homepage */
  --container:      900px;  /* guide detail, fundamentals */
  --measure:        640px;  /* max-width for long-form paragraphs */

  --radius:    8px;
  --radius-lg: 12px;

  --transition: .15s;
}

/* ── Light theme — same red/gold brand pair, warm paper surfaces.
   Applies when the OS prefers light and the user hasn't picked a
   theme yet, or whenever data-theme="light" is set explicitly
   (site/public/js/theme-init.js + shared.js's toggle set this). ─── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:       #faf6ef;
    --bg2:      #f2ebdf;
    --surface:  #ffffff;
    --surface2: #f7f0e6;
    --surface3: #efe5d5;
    --line:     rgba(35,25,15,0.10);
    --line2:    rgba(35,25,15,0.18);
    --t1:  #241b13;
    --t2:  #6b5c4c;
    --t3:  #7a6a58;
    --gold:     #9c6209;
    --gold-d:   rgba(156,98,9,0.10);
    --gold-b:   rgba(156,98,9,0.32);
    --red:      #c81e30;
    --red-d:    rgba(200,30,48,0.08);
    --red-b:    rgba(200,30,48,0.28);
    --ok:       #148a45;
    --ok-d:     rgba(20,138,69,0.08);
    --ok-b:     rgba(20,138,69,0.24);
    --warn:     #a85e08;
    --warn-d:   rgba(168,94,8,0.08);
    --warn-b:   rgba(168,94,8,0.24);
    --glow-1:   rgba(200,30,48,0.07);
    --glow-2:   rgba(168,105,13,0.10);
    --shadow-strong: rgba(35,25,15,.18);
  }
}
:root[data-theme="light"] {
  --bg:       #faf6ef;
  --bg2:      #f2ebdf;
  --surface:  #ffffff;
  --surface2: #f7f0e6;
  --surface3: #efe5d5;
  --line:     rgba(35,25,15,0.10);
  --line2:    rgba(35,25,15,0.18);
  --t1:  #241b13;
  --t2:  #6b5c4c;
  --t3:  #7a6a58;
  --gold:     #9c6209;
  --gold-d:   rgba(156,98,9,0.10);
  --gold-b:   rgba(156,98,9,0.32);
  --red:      #c81e30;
  --red-d:    rgba(200,30,48,0.08);
  --red-b:    rgba(200,30,48,0.28);
  --ok:       #148a45;
  --ok-d:     rgba(20,138,69,0.08);
  --ok-b:     rgba(20,138,69,0.24);
  --warn:     #a85e08;
  --warn-d:   rgba(168,94,8,0.08);
  --warn-b:   rgba(168,94,8,0.24);
  --glow-1:   rgba(200,30,48,0.07);
  --glow-2:   rgba(168,105,13,0.10);
  --shadow-strong: rgba(35,25,15,.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  background:
    radial-gradient(ellipse 900px 520px at 12% -8%, var(--glow-1), transparent 60%),
    radial-gradient(ellipse 700px 520px at 104% 0%, var(--glow-2), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--t1);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--gold-b); color: var(--t1); }

/* ── Eyebrow label (small branded kicker above a heading) ──── */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.eyebrow::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--gradient-brand); flex-shrink: 0; }

/* ── Gradient brand text (hero titles) ─────────────────────── */
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ── Shared avatar (used on homepage + guide view) ─────────── */
.avatar {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-2xs); font-weight:800; flex-shrink:0; overflow:hidden; position:relative;
}
.avatar img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; position:absolute; inset:0; }
.avatar .initials { position:relative; z-index:1; font-family:var(--font-mono); }

/* ── Top bar (guide + fundamentals pages) ──────────────────── */
.topbar {
  max-width:var(--container-wide); margin:0 auto; padding:16px 20px 0;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.topbar-back {
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700;
  letter-spacing:.06em; color:var(--t2); display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; margin:-10px -12px; border-radius:var(--radius); transition:color var(--transition), background var(--transition);
  min-height:40px;
}
.topbar-back:hover { color:var(--t1); background:var(--surface); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:8px 14px; border-radius:var(--radius);
  border:1px solid var(--line2); color:var(--t2); transition:color var(--transition), border-color var(--transition), background var(--transition);
  display:inline-flex; align-items:center; gap:6px; min-height:36px;
}
.btn:hover { color:var(--t1); border-color:var(--t2); }
.btn-primary { background:var(--accent-d); border-color:var(--accent-b); color:var(--accent); }
.btn-primary:hover { background:var(--accent-b); color:var(--t1); }

/* ── Theme toggle ───────────────────────────────────────────── */
.theme-toggle {
  width:36px; height:36px; flex-shrink:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line2); font-size:16px; line-height:1;
  transition:border-color var(--transition), background var(--transition), transform var(--transition);
}
.theme-toggle:hover { border-color:var(--gold-b); background:var(--surface2); transform:translateY(-1px); }

/* ── Empty / loading state ─────────────────────────────────── */
.empty-state { text-align:center; padding:60px 20px; color:var(--t3); }
.empty-state h2 { font-size:var(--text-xl); color:var(--t2); margin-bottom:6px; }
.empty-state p { font-size:var(--text-sm); }

/* ── Accessibility utilities ────────────────────────────────── */
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; top:-100%; left:12px; z-index:100;
  background:var(--surface); color:var(--t1); border:1px solid var(--accent-b);
  border-radius:var(--radius); padding:10px 16px; font-size:var(--text-sm); font-weight:700;
  transition:top var(--transition);
}
.skip-link:focus { top:12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important; scroll-behavior:auto !important;
  }
}