/* ============================================================
   THEME.CSS — CSS variables, fonts, base reset, body background
   Shared across all pages. Edit here to change the global palette.
   ============================================================ */

/* ── FONTS ───────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── GLOBAL DESIGN TOKENS ────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-dark:    #1a1a2e;
  --bg-panel:   #16213e;
  --bg-elevated:#0f1830;
  --bg-soft:    rgba(255,255,255,0.04);
  --bg-app:     linear-gradient(180deg, #151b33 0%, #1a1a2e 100%);
  --header-bg:  rgba(22,33,62,0.97);
  --footer-bg:  rgba(16,24,50,0.45);
  --results-bg: rgba(15,52,96,0.2);
  --drawer-bg:  rgba(13,20,45,0.99);
  --overlay:    rgba(0,0,0,0.55);
  --input-bg:   #0d1a30;
  --input-bg-focus: #111f38;
  --input-border: #3a3a5a;
  --card-shell: rgba(22,33,62,0.65);
  --card-shadow: 0 4px 24px rgba(0,0,0,0.5);
  --grid-line:  rgba(201,168,76,1);

  /* Text */
  --text-light: #e8e8e8;
  --text-muted: #9a9ab0;
  --text-dim:   #6a6a80;
  --text-strong:#ffffff;
  --text-on-gold:#1a1a2e;

  /* Gold accent */
  --gold:       #c9a84c;
  --gold-dim:   #8a6a2c;

  /* Borders & shadows */
  --border:     #2a2a4a;
  --shadow:     0 4px 24px rgba(0,0,0,0.5);

  /* Utility */
  --radius:     6px;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg-dark:    #efe5d1;
  --bg-panel:   #f7f0df;
  --bg-elevated:#fffaf0;
  --bg-soft:    rgba(126, 83, 37, 0.06);
  --bg-app:     linear-gradient(180deg, #f7efde 0%, #efe5d1 55%, #e8ddc7 100%);
  --header-bg:  rgba(247,240,223,0.92);
  --footer-bg:  rgba(231,220,197,0.72);
  --results-bg: rgba(185, 157, 92, 0.12);
  --drawer-bg:  rgba(252,246,234,0.98);
  --overlay:    rgba(62,45,24,0.18);
  --input-bg:   #fffaf1;
  --input-bg-focus: #fffef8;
  --input-border: #cdbb96;
  --card-shell: rgba(255,250,240,0.72);
  --card-shadow: 0 12px 40px rgba(102,76,41,0.12);
  --grid-line:  rgba(134,97,45,0.45);
  --text-light: #2f2417;
  --text-muted: #6b5a45;
  --text-dim:   #8d7b63;
  --text-strong:#20160c;
  --text-on-gold:#fffaf0;
  --gold:       #8f612d;
  --gold-dim:   #c09355;
  --border:     #d5c4a4;
  --shadow:     0 14px 44px rgba(102,76,41,0.14);
  color-scheme: light;
}

/* ── BASE RESET ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  overflow-x: hidden;
}

/* ── BODY ────────────────────────────────────────────────────── */
body {
  font-family: 'EB Garamond', Georgia, serif;
  background: var(--bg-app);
  color: var(--text-light);
  min-height: 100vh;
  transition: background 0.25s ease, color 0.25s ease;
}

a { color: inherit; }