@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cinzel+Decorative:wght@400;700&family=MedievalSharp&family=Spectral:ital,wght@0,400;0,600;1,400&family=Pirata+One&family=Dancing+Script:wght@400;600&display=swap');

:root {
  --color-bg-dark: #0f0f23;
  --color-bg-medium: #16213e;
  --color-bg-light: #1a1a2e;
  --color-gold: #FFD700;
  --color-gold-dark: #B8860B;
  --color-gold-light: #FFA500;
  --color-crimson: #8B0000;
  --color-crimson-light: #DC2626;
  --color-silver: #C0C0C0;
  --color-gray: #666666;
  --color-success: #22c55e;
  --color-error: #dc2626;
  --color-text: #f5f5f5;
  --color-text-muted: #a0a0a0;
  --color-parchment: #f4e4bc;
  --color-parchment-dark: #d4c4a0;
  
  --gradient-bg: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-bg-medium) 50%, var(--color-bg-dark) 100%);
  --gradient-gold: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  --gradient-card: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);
  
  --font-title: 'Cinzel', serif;
  --font-body: 'Crimson Text', serif;
  --font-ui: 'Inter', sans-serif;
  --font-medieval: 'MedievalSharp', cursive;
  --font-dropcap: 'Pirata One', cursive;
  --font-reader: 'Spectral', serif;
  --font-dialogue: 'Dancing Script', cursive;
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 0 20px rgba(255, 215, 0, 0.3);
  --shadow-gold-strong: 0 0 30px rgba(255, 215, 0, 0.5);
  
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-tooltip: 400;
}