/* =============================================================
   DESIGN TOKENS — 42tcg dark fantasy palette
   Three-tier model: reference → system → component
   ============================================================= */

/* ----- REFERENCE -------------------------------------------- */
:root {
  /* brand colors */
  --ref-black-deep: #0d0b0f;
  --ref-surface-dark: #1a1525;
  --ref-surface-mid: #241d34;
  --ref-purple-700: #5b21b6;
  --ref-purple-600: #7c3aed;
  --ref-purple-400: #a78bfa;
  --ref-purple-200: #ddd6fe;
  --ref-gold-500: #f59e0b;
  --ref-gold-300: #fcd34d;
  --ref-gold-100: #fef3c7;
  --ref-text-primary: #f5f0ff;
  --ref-text-secondary: #a78bfa;
  --ref-text-muted: #6b5fa6;
  --ref-white: #fff;

  /* feedback */
  --ref-red-500: #ef4444;
  --ref-red-900: #3b0000;
  --ref-green-400: #4ade80;
  --ref-green-900: #052e16;

  /* spacing */
  --ref-size-2: 2px;
  --ref-size-4: 4px;
  --ref-size-8: 8px;
  --ref-size-12: 12px;
  --ref-size-16: 16px;
  --ref-size-24: 24px;
  --ref-size-32: 32px;
  --ref-size-48: 48px;
  --ref-size-64: 64px;
  --ref-size-96: 96px;

  /* type */
  --ref-font-display: 'Cinzel', georgia, serif;
  --ref-font-elfic: 'Eagle Lake', cursive, serif;
  --ref-font-sans: system-ui, -apple-system, sans-serif;

  /* backgrounds */
  --color-bg: var(--ref-black-deep);
  --color-bg-surface: var(--ref-surface-dark);
  --color-bg-surface-raised: var(--ref-surface-mid);
  --color-bg-muted: var(--ref-surface-mid);
  --color-bg-sidebar: #050406;

  /* text */
  --color-text: var(--ref-text-primary);
  --color-text-secondary: var(--ref-text-secondary);
  --color-text-disabled: var(--ref-text-muted);
  --color-text-inverse: var(--ref-black-deep);
  --color-text-link: var(--ref-gold-300);

  /* borders */
  --color-border: var(--ref-surface-mid);
  --color-border-accent: var(--ref-purple-600);
  --color-border-gold: var(--ref-gold-500);

  /* interactive */
  --color-primary: var(--ref-purple-600);
  --color-primary-hover: var(--ref-purple-700);
  --color-accent: var(--ref-gold-500);
  --color-accent-rgb: 245, 158, 11;
  --color-accent-hover: var(--ref-gold-300);
  --color-focus-ring: var(--ref-gold-300);

  /* feedback */
  --color-critical: var(--ref-red-500);
  --color-critical-bg: var(--ref-red-900);
  --color-success: var(--ref-green-400);
  --color-success-bg: var(--ref-green-900);

  /* spacing */
  --space-2xs: var(--ref-size-2);
  --space-xs: var(--ref-size-4);
  --space-sm: var(--ref-size-8);
  --space-md: var(--ref-size-16);
  --space-lg: var(--ref-size-24);
  --space-xl: var(--ref-size-32);
  --space-2xl: var(--ref-size-48);
  --space-3xl: var(--ref-size-64);
  --space-4xl: var(--ref-size-96);

  /* type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.5rem;

  /* fonts */
  --font-display: var(--ref-font-display);
  --font-elfic: var(--ref-font-elfic);
  --font-sans: var(--ref-font-sans);

  /* radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* shadows */
  --shadow-card: 0 4px 24px rgb(124 58 237 / 15%);
  --shadow-glow: 0 0 32px rgb(124 58 237 / 30%);
  --shadow-gold: 0 0 16px rgb(245 158 11 / 25%);

  /* aesthetic textures */
  --texture-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

  /* ornate colors */
  --color-parchment: #d4b483;
  --color-parchment-dark: #a88a5e;
  --color-inner-glow: inset 0 0 20px rgb(124 58 237 / 15%);

  /* Borders & Decorations */
  --border-ornate: 2px solid var(--color-border-gold);
  --border-glow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary-hover);
  --bg-magical: radial-gradient(circle at center, #241d34 0%, #0d0b0f 100%);
}

html[data-theme='taverna'] {
  --color-bg: #120d08;
  --color-bg-surface: #24170f;
  --color-bg-surface-raised: #352012;
  --color-bg-muted: #2c1b11;
  --color-text: #f8eedf;
  --color-text-secondary: #d8b893;
  --color-border-accent: #9b5d2e;
  --color-accent: #f2b862;
  --color-accent-hover: #fcd9a0;
  --color-primary: #cc6f39;
  --color-primary-hover: #e5874d;
  --shadow-glow: 0 0 28px rgb(204 111 57 / 35%);
  --bg-magical: radial-gradient(circle at center, #2a1a10 0%, #120d08 100%);
}