/**
 * CSS Variables - Tome of Tales Design System
 * 
 * Complete color palette, spacing, shadows, and effects
 * Reference: TOME_OF_TALES_DESIGN_PHILOSOPHY.md
 * 
 * Usage: All other CSS files import these variables for consistency
 */

:root {
  /* ===============================================================
       COLOR PALETTE - Candlelit Grimoire
       =============================================================== */

  /* Primary Colors */
  --parchment: #fdf6e3; /* Aged paper white */
  --ink: #2c2416; /* Deep brown-black */
  --gold: #ffa500; /* Candlelight glow */
  --arcane-purple: #9b59b6; /* Spellcasting magic */
  --mystic-blue: #3498db; /* Wisdom, perception */
  --ember: #ff6b35; /* Dice, danger, critical */

  /* Semantic Aliases */
  --dice: var(--ember);
  --dice-rgb: 255, 107, 53; /* RGB for alpha blending */
  --text-color: var(--parchment);
  --text-secondary: #c8b8a0; /* Faded text */
  --background: var(--ink);
  --accent: var(--gold);

  /* State Colors */
  --success: #4ade80; /* Saving throw success */
  --warning: #fbbf24; /* Warning, caution */
  --error: #f87171; /* Failure, critical fail */
  --info: var(--mystic-blue); /* Informational */

  /* ===============================================================
       GLASSMORPHISM EFFECTS
       =============================================================== */

  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-hover: rgba(255, 255, 255, 0.08);
  --glass-active: rgba(255, 255, 255, 0.12);

  /* ===============================================================
       SHADOWS - Candlelit Depth
       =============================================================== */

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.6);

  /* ===============================================================
       GLOW EFFECTS
       =============================================================== */

  --glow-subtle: 0 0 10px;
  --glow-medium: 0 0 20px;
  --glow-strong: 0 0 40px;

  /* Glow colors */
  --glow-gold: rgba(255, 165, 0, 0.4);
  --glow-ember: rgba(255, 107, 53, 0.4);
  --glow-purple: rgba(155, 89, 182, 0.4);
  --glow-blue: rgba(52, 152, 219, 0.4);

  /* ===============================================================
       SPACING SYSTEM (REM-based for UI scaling)
       =============================================================== */

  --space-xs: 0.25rem; /* 4px  */
  --space-sm: 0.5rem; /* 8px  */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4rem; /* 64px */

  /* ===============================================================
       BORDER RADIUS
       =============================================================== */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ===============================================================
       TYPOGRAPHY
       =============================================================== */

  --font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-family-heading: "Georgia", "Times New Roman", serif;

  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ===============================================================
       TRANSITIONS & ANIMATIONS
       =============================================================== */

  --transition-fast: 0.1s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.5s ease;

  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Animation durations */
  --duration-instant: 0s;
  --duration-fast: 0.2s;
  --duration-medium: 0.3s;
  --duration-slow: 0.5s;
  --duration-very-slow: 1s;
  --duration-ambient: 3s;

  /* ===============================================================
       Z-INDEX LAYERS
       =============================================================== */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ===============================================================
       UI SCALE SYSTEM (ACCESSIBILITY)
       =============================================================== */

  --ui-scale: 1; /* Default 100% */
  font-size: calc(16px * var(--ui-scale));
}

/* ===============================================================
   UI SCALE PRESETS
   =============================================================== */

:root[data-ui-scale="small"] {
  --ui-scale: 0.875; /* 87.5% (14px base) */
}

:root[data-ui-scale="normal"] {
  --ui-scale: 1; /* 100% (16px base) */
}

:root[data-ui-scale="large"] {
  --ui-scale: 1.125; /* 112.5% (18px base) */
}

:root[data-ui-scale="xlarge"] {
  --ui-scale: 1.25; /* 125% (20px base) */
}

/* ===============================================================
   THEME-SPECIFIC OVERRIDES
   =============================================================== */

/* Sapphire Tome Theme */
body[data-theme="sapphire"] {
  --dice: #3498db;
  --dice-rgb: 52, 152, 219;
  --accent: var(--mystic-blue);
  --glow-primary: var(--glow-blue);
}

/* Emerald Tome Theme */
body[data-theme="emerald"] {
  --dice: #4ade80;
  --dice-rgb: 74, 222, 128;
  --accent: var(--success);
  --glow-primary: rgba(74, 222, 128, 0.4);
}

/* Amethyst Tome Theme */
body[data-theme="amethyst"] {
  --dice: #9b59b6;
  --dice-rgb: 155, 89, 182;
  --accent: var(--arcane-purple);
  --glow-primary: var(--glow-purple);
}

/* Crimson Valor Theme */
body[data-theme="crimson"] {
  --dice: #ff6b35;
  --dice-rgb: 255, 107, 53;
  --accent: var(--ember);
  --glow-primary: var(--glow-ember);
}

/* Obsidian Tome Theme (Dark) */
body[data-theme="obsidian"] {
  --background: #0f0f0f;
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.06);
}

/* Celestial Tome Theme (Light) */
body[data-theme="celestial"] {
  --background: #e8dfc5;
  --text-color: #2c2416;
  --text-secondary: #5a5244;
  --glass-bg: rgba(0, 0, 0, 0.05);
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-hover: rgba(0, 0, 0, 0.08);
}

/* ===============================================================
   ACCESSIBILITY PREFERENCES
   =============================================================== */

/* Reduced motion: Disable animations */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01s;
    --duration-medium: 0.01s;
    --duration-slow: 0.01s;
    --duration-very-slow: 0.01s;
    --duration-ambient: 0.01s;
  }
}

/* High contrast: Increase border visibility */
@media (prefers-contrast: high) {
  :root {
    --glass-border: rgba(255, 255, 255, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
  }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #1a1410;
    --text-color: #fdf6e3;
  }
}

/* Light mode preference */
@media (prefers-color-scheme: light) {
  :root {
    --background: #f5f0e8;
    --text-color: #2c2416;
  }
}

/* ===============================================================
   UTILITY CLASSES (Using Variables)
   =============================================================== */

/* Spacing utilities */
.mt-xs {
  margin-top: var(--space-xs);
}
.mt-sm {
  margin-top: var(--space-sm);
}
.mt-md {
  margin-top: var(--space-md);
}
.mt-lg {
  margin-top: var(--space-lg);
}
.mt-xl {
  margin-top: var(--space-xl);
}

.mb-xs {
  margin-bottom: var(--space-xs);
}
.mb-sm {
  margin-bottom: var(--space-sm);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}
.mb-xl {
  margin-bottom: var(--space-xl);
}

.pt-xs {
  padding-top: var(--space-xs);
}
.pt-sm {
  padding-top: var(--space-sm);
}
.pt-md {
  padding-top: var(--space-md);
}
.pt-lg {
  padding-top: var(--space-lg);
}
.pt-xl {
  padding-top: var(--space-xl);
}

.pb-xs {
  padding-bottom: var(--space-xs);
}
.pb-sm {
  padding-bottom: var(--space-sm);
}
.pb-md {
  padding-bottom: var(--space-md);
}
.pb-lg {
  padding-bottom: var(--space-lg);
}
.pb-xl {
  padding-bottom: var(--space-xl);
}

/* Text color utilities */
.text-primary {
  color: var(--text-color);
}
.text-secondary {
  color: var(--text-secondary);
}
.text-accent {
  color: var(--accent);
}
.text-dice {
  color: var(--dice);
}
.text-success {
  color: var(--success);
}
.text-warning {
  color: var(--warning);
}
.text-error {
  color: var(--error);
}

/* Background utilities */
.bg-glass {
  background: var(--glass-bg);
}
.bg-glass-hover {
  background: var(--glass-hover);
}
.bg-glass-active {
  background: var(--glass-active);
}

/* Border utilities */
.border-glass {
  border: 2px solid var(--glass-border);
}
.border-accent {
  border: 2px solid var(--accent);
}
.border-dice {
  border: 2px solid var(--dice);
}

/* Shadow utilities */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}
.shadow-xl {
  box-shadow: var(--shadow-xl);
}

/* Glow utilities */
.glow-subtle {
  box-shadow: var(--glow-subtle) var(--glow-gold);
}
.glow-medium {
  box-shadow: var(--glow-medium) var(--glow-gold);
}
.glow-strong {
  box-shadow: var(--glow-strong) var(--glow-gold);
}

/* ===============================================================
   NOTES
   =============================================================== */

/*
 * All values use rem units where possible for UI scaling support
 * Color values use CSS variables for theme switching
 * Shadow/glow effects create candlelit atmosphere
 * UI scale system allows 75%-125% scaling for accessibility
 * Theme overrides maintain consistent design language
 */