/* ═══════════════════════════════════════════════════════════
   THEME.CSS — CSS Variables & Theme Switching
   Single source of truth for all design tokens.
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. DARK THEME (Default)
   ───────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-base: #080910;
  --bg-surface: #0f1018;
  --bg-elevated: #161821;
  --bg-card: #1c1e2b;
  --bg-card-alt: #222436;
  --bg-overlay: rgba(8, 9, 16, 0.85);

  /* Typography */
  --txt-primary: #f0ece4;
  --txt-secondary: #9b968e;
  --txt-muted: #5c5852;
  --txt-inverse: #080910;

  /* Brand Gold */
  --gold: #d9a84e;
  --gold-light: #edca80;
  --gold-dark: #a87e2e;
  --gold-alpha-10: rgba(217, 168, 78, 0.10);
  --gold-alpha-18: rgba(217, 168, 78, 0.18);
  --gold-alpha-30: rgba(217, 168, 78, 0.30);

  /* Borders */
  --border-dim: rgba(240, 236, 228, 0.07);
  --border-mid: rgba(240, 236, 228, 0.13);
  --border-gold: rgba(217, 168, 78, 0.22);
  --border-gold-s: rgba(217, 168, 78, 0.50);

  /* Shadows */
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 28px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 16px 56px rgba(0, 0, 0, 0.65);
  --shadow-gold: 0 8px 40px rgba(217, 168, 78, 0.22);
  --glow-gold: 0 0 60px rgba(217, 168, 78, 0.14);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 9999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.28s;
  --dur-slow: 0.50s;

  /* Layout */
  --nav-h: 68px;
  --container-max: 1240px;
  --container-pad: 28px;
}

/* ─────────────────────────────────────────────────────────────
   2. LIGHT MODE OVERRIDES
   ───────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base: #f7f3ec;
  --bg-surface: #ede9e0;
  --bg-elevated: #e5e0d6;
  --bg-card: #ffffff;
  --bg-card-alt: #faf7f2;
  --bg-overlay: rgba(247, 243, 236, 0.90);

  --txt-primary: #18150e;
  --txt-secondary: #5a5348;
  --txt-muted: #9a9088;
  --txt-inverse: #f7f3ec;

  --gold: #b8860b;
  --gold-light: #d4a843;
  --gold-dark: #8a6508;
  --gold-alpha-10: rgba(184, 134, 11, 0.10);
  --gold-alpha-18: rgba(184, 134, 11, 0.18);
  --gold-alpha-30: rgba(184, 134, 11, 0.30);

  --border-dim: rgba(24, 21, 14, 0.08);
  --border-mid: rgba(24, 21, 14, 0.14);
  --border-gold: rgba(184, 134, 11, 0.24);
  --border-gold-s: rgba(184, 134, 11, 0.55);

  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 6px 28px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 16px 56px rgba(0, 0, 0, 0.14);
  --shadow-gold: 0 8px 40px rgba(184, 134, 11, 0.16);
  --glow-gold: 0 0 60px rgba(184, 134, 11, 0.10);
}

/* ─────────────────────────────────────────────────────────────
   3. BLOG PAGE — Light Theme Overrides
   ───────────────────────────────────────────────────────────── */

/* In light mode the blog header gradient shifts to warm light tones */
[data-theme="light"] .blog-header::after {
  background: linear-gradient(to bottom,
      rgba(247, 243, 236, 0.7) 0%,
      rgba(247, 243, 236, 0.3) 60%,
      var(--bg-base) 100%);
}

/* In light mode h1 text uses the standard text color */
[data-theme="light"] .blog-header h1 {
  color: var(--txt-primary);
  text-shadow: none;
}

/* In light mode lead text uses secondary color */
[data-theme="light"] .blog-header .lead {
  color: var(--txt-secondary);
}