/* ===== Light Palette (default) ===== */
/* All contrast ratios measured against WCAG 2.1 relative luminance formula */
:root,
[data-theme="light"] {
  /* Background: #faf8f5 — warm off-white */
  --color-bg: #faf8f5;

  /* Surface: #f0ebe3 — creamy card background */
  --color-surface: #f0ebe3;

  /* Text primary: #1a1a2e on #faf8f5 → contrast ~16.1:1 ✓ (AA + AAA) */
  --color-text-primary: #1a1a2e;

  /* Text secondary: #4a4a6a on #faf8f5 → contrast ~7.7:1 ✓ (AA + AAA) */
  --color-text-secondary: #4a4a6a;

  /* Accent (muted gold): #7a5c10 on #f0ebe3 → contrast ~5.3:1 ✓ (AA) */
  --color-accent: #7a5c10;
  --color-accent-hover: #5d4509;

  /* Text on accent background: white on dark gold → contrast ~5.9:1 ✓ (AA) */
  --color-on-accent: #ffffff;

  /* Border */
  --color-border: #d4c9b8;

  /* Shadow — warm-tinted */
  --shadow-sm: 0 1px 3px rgba(26, 26, 46, 0.08), 0 1px 2px rgba(26, 26, 46, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 26, 46, 0.10), 0 2px 4px rgba(26, 26, 46, 0.06);

  /* Translucent bg for header blur — fallback for browsers without color-mix() */
  --color-bg-translucent: rgba(250, 248, 245, 0.80);
}

/* ===== Dark Palette ===== */
[data-theme="dark"] {
  /* Background: #0f0f1a — deep navy */
  --color-bg: #0f0f1a;

  /* Surface: #1a1a2e — slightly lighter navy */
  --color-surface: #1a1a2e;

  /* Text primary: #f5f0e8 on #0f0f1a → contrast ~17.1:1 ✓ (AA + AAA) */
  --color-text-primary: #f5f0e8;

  /* Text secondary: #a8a0b8 on #0f0f1a → contrast ~8.6:1 ✓ (AA + AAA) */
  --color-text-secondary: #a8a0b8;

  /* Accent (brighter gold for dark bg): #d4a843 on #1a1a2e → contrast ~7.2:1 ✓ (AA + AAA) */
  --color-accent: #d4a843;
  --color-accent-hover: #e8bf5a;

  /* Text on accent background: dark navy on bright gold → contrast ~8.9:1 ✓ (AA + AAA) */
  --color-on-accent: #0f0f1a;

  /* Border */
  --color-border: #2e2e4a;

  /* Shadow — navy-tinted */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.24);

  --color-bg-translucent: rgba(15, 15, 26, 0.80);
}

/* ===== System Preference Fallback ===== */
/* Applied only when no explicit data-theme attribute is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0f0f1a;
    --color-surface: #1a1a2e;
    --color-text-primary: #f5f0e8;
    --color-text-secondary: #a8a0b8;
    --color-accent: #d4a843;
    --color-accent-hover: #e8bf5a;
    --color-on-accent: #0f0f1a;
    --color-border: #2e2e4a;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.24);
    --color-bg-translucent: rgba(15, 15, 26, 0.80);
  }
}

/* ===== Theme Transition ===== */
@media (prefers-reduced-motion: no-preference) {
  :root {
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  body,
  header,
  footer,
  nav,
  .card,
  .btn,
  .modal,
  .modal-overlay {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
}