/* ═══════════════════════════════════════════════════════════════════════════
   01-VARIABLES.CSS
   Mystery Temple - Galaxy Edition
   
   All CSS custom properties (variables) in one place.
   Makes theming and maintenance easy.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  PRIMARY COLORS                                                   ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --color-primary: #00ff88;
    --color-primary-dark: #00aa66;
    --color-primary-light: #66ffbb;
    --color-primary-glow: rgba(0, 255, 136, 0.7);
    --color-primary-soft: rgba(0, 255, 136, 0.2);

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  SECONDARY COLORS                                                 ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --color-secondary: #00ccff;
    --color-secondary-dark: #0088cc;
    --color-secondary-light: #66ddff;
    --color-secondary-glow: rgba(0, 204, 255, 0.7);

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  ACCENT COLORS                                                    ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --color-accent: #ffcc00;
    --color-accent-dark: #cc9900;
    --color-accent-light: #ffdd66;
    --color-accent-glow: rgba(255, 204, 0, 0.7);

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  PURPLE/MAGIC COLORS                                              ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --color-purple: #aa66ff;
    --color-purple-dark: #8844cc;
    --color-purple-light: #cc99ff;
    --color-purple-glow: rgba(170, 102, 255, 0.7);

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  STATUS COLORS                                                    ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --color-success: #00ff88;
    --color-warning: #ffcc00;
    --color-danger: #ff4444;
    --color-danger-dark: #cc2222;
    --color-danger-glow: rgba(255, 68, 68, 0.7);
    --color-info: #00ccff;

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  GEM COLORS                                                       ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --color-gem-red: #ff4444;
    --color-gem-red-glow: rgba(255, 68, 68, 0.6);
    --color-gem-green: #00ff88;
    --color-gem-green-glow: rgba(0, 255, 136, 0.6);
    --color-gem-blue: #0088ff;
    --color-gem-blue-glow: rgba(0, 136, 255, 0.6);
    --color-gem-yellow: #ffcc00;
    --color-gem-yellow-glow: rgba(255, 204, 0, 0.6);

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  BACKGROUND COLORS                                                ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --bg-dark: #050712;
    --bg-darker: #02030a;
    --bg-galaxy: #0a0d1a;
    --bg-panel: rgba(10, 20, 30, 0.92);
    --bg-panel-dark: rgba(5, 15, 25, 0.95);
    --bg-panel-light: rgba(20, 35, 50, 0.9);
    --bg-overlay: rgba(0, 0, 0, 0.92);
    --bg-overlay-light: rgba(0, 0, 0, 0.75);

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  TEXT COLORS                                                      ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;
    --text-dark: #333333;
    --text-glow: #5fc;
    --text-gold: #ffd700;

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  BORDER COLORS                                                    ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --border-primary: #4a9;
    --border-secondary: #08f;
    --border-accent: #f90;
    --border-purple: #a6f;
    --border-dark: #333;
    --border-light: #666;

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  FONT FAMILIES                                                    ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --font-title: 'Cinzel', serif;
    --font-mono: 'Share Tech Mono', monospace;
    --font-sinhala: 'Noto Sans Sinhala', sans-serif;
    --font-space: 'Orbitron', sans-serif;

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  FONT SIZES                                                       ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --font-xs: 0.65em;
    --font-sm: 0.8em;
    --font-md: 1em;
    --font-lg: 1.2em;
    --font-xl: 1.5em;
    --font-2xl: 2em;
    --font-3xl: 3em;

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  SPACING                                                          ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  BORDER RADIUS                                                    ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  Z-INDEX LAYERS                                                   ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --z-canvas: 1;
    --z-particles: 2;
    --z-vignette: 5;
    --z-hud: 10;
    --z-controls: 20;
    --z-popup: 50;
    --z-countdown: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;
    --z-loading: 1000;

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  TRANSITIONS                                                      ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  SHADOWS                                                          ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --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-panel: 0 0 25px rgba(68, 170, 153, 0.4);
    --shadow-button: 0 6px 25px rgba(0, 0, 0, 0.4);
    
    /* Glow Shadows */
    --glow-green: 0 0 20px rgba(0, 255, 136, 0.8);
    --glow-blue: 0 0 20px rgba(0, 136, 255, 0.8);
    --glow-gold: 0 0 20px rgba(255, 204, 0, 0.8);
    --glow-purple: 0 0 20px rgba(170, 102, 255, 0.8);
    --glow-red: 0 0 20px rgba(255, 68, 68, 0.8);

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  CONTROL SIZES                                                    ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --control-btn-size: 64px;
    --control-btn-size-lg: 80px;
    --control-btn-size-sm: 56px;

    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  GAME SPECIFIC                                                    ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --hud-padding: 12px;
    --panel-min-width: 120px;
    --overlay-max-width: 480px;
    --mobile-controls-height: 100px;
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  DARK THEME OVERRIDES (if needed in future)                              ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Already dark theme, no changes needed */
    }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  REDUCED MOTION PREFERENCE                                                ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0.01ms;
        --transition-normal: 0.01ms;
        --transition-slow: 0.01ms;
    }
}