/*
 * QuickMonster Design Tokens
 * All CSS custom properties for the theme
 */

:root {
  /* ========================================
     PRIMARY COLORS - From Logo
     ======================================== */
  --qm-crimson: #C41E3A;
  --qm-crimson-light: #E63950;
  --qm-crimson-dark: #9A1830;
  --qm-crimson-darker: #7A1428;
  --qm-blood: #8B0000;
  --qm-blood-dark: #5C0000;
  --qm-coral: #E85A4F;
  --qm-coral-light: #FF7B6B;

  /* ========================================
     SECONDARY COLORS - Fantasy Palette
     ======================================== */
  --qm-gold: #D4AF37;
  --qm-gold-light: #F4CF57;
  --qm-gold-dark: #A48A2C;
  --qm-gold-muted: #8B7355;
  --qm-bronze: #CD7F32;
  --qm-copper: #B87333;
  --qm-silver: #C0C0C0;
  --qm-platinum: #E5E4E2;

  /* ========================================
     ARCANE COLORS - Blood Magic Theme
     Fuses magical effects with crimson palette
     ======================================== */
  --qm-arcane: #E63950;
  --qm-arcane-light: #FF5A6E;
  --qm-arcane-dark: #B82E40;
  --qm-arcane-glow: rgba(230, 57, 80, 0.5);
  --qm-mystic: #D4456A;
  --qm-mystic-light: #E8607F;
  --qm-mystic-dark: #A33552;
  --qm-ether: #FF8C5A;
  --qm-ether-dark: #D46B3A;
  --qm-ether-glow: rgba(255, 140, 90, 0.4);
  --qm-void-purple: #1A0A0F;
  --qm-rune: #D4AF37;
  --qm-rune-glow: rgba(212, 175, 55, 0.4);

  /* ========================================
     NEUTRAL DARK TONES - Backgrounds
     ======================================== */
  --qm-void: #0A0A0C;
  --qm-obsidian: #0D0D0F;
  --qm-abyss: #121215;
  --qm-charcoal: #1A1A1F;
  --qm-slate: #242429;
  --qm-stone: #2E2E35;
  --qm-granite: #3A3A42;
  --qm-ash: #4A4A52;

  /* ========================================
     PARCHMENT TONES - Content Areas
     ======================================== */
  --qm-parchment: #F5E6C8;
  --qm-parchment-dark: #E8D4A8;
  --qm-parchment-light: #FDF6E3;
  --qm-parchment-aged: #DDD0B4;
  --qm-vellum: #F0E0C0;
  --qm-aged-paper: #D4C4A8;
  --qm-sepia: #704214;

  /* ========================================
     FUNCTIONAL COLORS
     ======================================== */
  --qm-success: #2D5A27;
  --qm-success-light: #4A8C42;
  --qm-success-dark: #1E3D1A;
  --qm-warning: #B8860B;
  --qm-warning-light: #DAA520;
  --qm-warning-dark: #8B6914;
  --qm-danger: #8B0000;
  --qm-danger-light: #C41E3A;
  --qm-info: #1E4A6E;
  --qm-info-light: #2E6A9E;
  --qm-info-dark: #153550;

  /* ========================================
     TEXT COLORS
     ======================================== */
  --qm-text-light: #F5F5F5;
  --qm-text-bright: #FFFFFF;
  --qm-text-muted: #A0A0A8;
  --qm-text-dim: #6A6A72;
  --qm-text-dark: #2A2A2A;
  --qm-text-parchment: #3D2E1E;
  --qm-text-parchment-muted: #5C4A3A;

  /* ========================================
     SHADOWS
     ======================================== */
  --qm-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --qm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --qm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --qm-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.6);
  --qm-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  --qm-shadow-inner-lg: inset 0 4px 8px rgba(0, 0, 0, 0.4);
  --qm-shadow-glow-crimson: 0 0 20px rgba(196, 30, 58, 0.4);
  --qm-shadow-glow-gold: 0 0 20px rgba(212, 175, 55, 0.3);
  --qm-shadow-glow-fire: 0 0 30px rgba(255, 100, 50, 0.4);

  /* Arcane Glows - Blood Magic */
  --qm-shadow-glow-arcane: 0 0 20px var(--qm-arcane-glow);
  --qm-shadow-glow-mystic: 0 0 25px rgba(212, 69, 106, 0.4);
  --qm-shadow-glow-ether: 0 0 20px var(--qm-ether-glow);
  --qm-shadow-glow-rune: 0 0 15px var(--qm-rune-glow);
  --qm-shadow-arcane-intense: 0 0 30px var(--qm-arcane-glow), 0 0 60px rgba(196, 30, 58, 0.3);

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --qm-radius-xs: 2px;
  --qm-radius-sm: 4px;
  --qm-radius-md: 8px;
  --qm-radius-lg: 12px;
  --qm-radius-xl: 16px;
  --qm-radius-2xl: 24px;
  --qm-radius-full: 9999px;

  /* ========================================
     SPACING SCALE
     ======================================== */
  --qm-space-xs: 0.25rem;
  --qm-space-sm: 0.5rem;
  --qm-space-md: 1rem;
  --qm-space-lg: 1.5rem;
  --qm-space-xl: 2rem;
  --qm-space-2xl: 3rem;
  --qm-space-3xl: 4rem;
  --qm-space-4xl: 6rem;

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --qm-font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --qm-font-heading: 'Cinzel', serif;
  --qm-font-body: 'Crimson Text', 'Georgia', serif;
  --qm-font-ui: 'Alegreya Sans', 'Segoe UI', sans-serif;
  --qm-font-mono: 'Fira Code', 'Consolas', monospace;

  /* Font Sizes */
  --qm-text-xs: 0.75rem;
  --qm-text-sm: 0.875rem;
  --qm-text-base: 1rem;
  --qm-text-lg: 1.125rem;
  --qm-text-xl: 1.25rem;
  --qm-text-2xl: 1.5rem;
  --qm-text-3xl: 1.875rem;
  --qm-text-4xl: 2.25rem;
  --qm-text-5xl: 3rem;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --qm-transition-fast: 150ms ease;
  --qm-transition-normal: 250ms ease;
  --qm-transition-slow: 400ms ease;
  --qm-transition-slower: 600ms ease;

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --qm-z-base: 1;
  --qm-z-dropdown: 100;
  --qm-z-sticky: 200;
  --qm-z-overlay: 300;
  --qm-z-modal: 400;
  --qm-z-toast: 500;
  --qm-z-tooltip: 600;

  /* ========================================
     BORDERS
     ======================================== */
  --qm-border-subtle: 1px solid var(--qm-granite);
  --qm-border-default: 2px solid var(--qm-granite);
  --qm-border-accent: 2px solid var(--qm-crimson);
  --qm-border-gold: 2px solid var(--qm-gold-dark);
}