/* ==========================================================================
   THEMES — CSS Custom Properties
   Dark theme (default) + Light theme override
   ========================================================================== */

:root {
  /* ── Backgrounds ──────────────────────────────────────────────────────── */
  --c-bg:        #080808;
  --c-surface:   #111111;
  --c-surface-2: #1a1a1a;
  --c-surface-3: #232323;

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --c-text:      #ebebeb;
  --c-text-2:    #888888;
  --c-text-3:    #505050;
  --c-text-inv:  #080808;

  /* ── Gold accent ──────────────────────────────────────────────────────── */
  --c-gold:      #c8a84b;
  --c-gold-2:    #e2c06e;
  --c-gold-3:    #a08030;
  --c-gold-bg:   rgba(200, 168, 75, 0.08);
  --c-gold-glow: rgba(200, 168, 75, 0.18);

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --c-border:    rgba(255, 255, 255, 0.07);
  --c-border-2:  rgba(255, 255, 255, 0.13);

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.55);
  --shadow-lg:   0 16px 56px rgba(0, 0, 0, 0.65);
  --shadow-gold: 0 4px 24px rgba(200, 168, 75, 0.18);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;
  --fs-6xl:  3.75rem;
  --fs-7xl:  4.5rem;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --t-fast:  0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:  0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:  0.4s  cubic-bezier(0.4, 0, 0.2, 1);
  --t-xslow: 0.65s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --header-h:  72px;
  --header-bg: rgba(8, 8, 8, 0.88);
}

/* ── Light theme ──────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --c-bg:        #f7f6f3;
  --c-surface:   #eeecea;
  --c-surface-2: #e5e2dc;
  --c-surface-3: #d8d4cc;

  --c-text:      #111111;
  --c-text-2:    #555555;
  --c-text-3:    #999999;
  --c-text-inv:  #f7f6f3;

  --c-gold:      #9a7220;
  --c-gold-2:    #c8a84b;
  --c-gold-3:    #7a5810;
  --c-gold-bg:   rgba(154, 114, 32, 0.08);
  --c-gold-glow: rgba(154, 114, 32, 0.14);

  --c-border:    rgba(0, 0, 0, 0.08);
  --c-border-2:  rgba(0, 0, 0, 0.14);

  --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg:   0 16px 56px rgba(0, 0, 0, 0.12);
  --shadow-gold: 0 4px 24px rgba(154, 114, 32, 0.12);

  --header-bg: rgba(247, 246, 243, 0.92);
}