/* File: /public/css/core/variables.css */
/* White-Label Gaming Platform - Core Variables (Neutral Defaults) */
/* v2.1.0 - Added minesweeper tile colors and background overlay controls */
/*
 * KEY NOTES:
 * - This file defines NEUTRAL platform defaults
 * - NOT specific to any brand (Wryon, KapBots, etc.)
 * - Theme files in /css/themes/ override these values
 * - Uses simple blue/gray as the base palette
 * - All client deployments MUST have a theme file loaded after this
 *
 * USAGE:
 * - Load this file FIRST, before any other stylesheets
 * - Theme CSS (wryon.css, kapbots.css, etc.) loads LAST to override
 * - Use var(--variable-name) throughout all CSS
 *
 * WHITE-LABEL PROCESS:
 * 1. Create theme file: /css/themes/[client].css
 * 2. Override brand colors, assets, and fonts
 * 3. Load theme after all other CSS
 */

:root {
    /* =================================================================
       BRAND COLORS - Primary (Neutral Blue)
       Override these in theme files for client branding
       ================================================================= */
    --brand-primary: #3b82f6;
    --brand-primary-dim: #2563eb;
    --brand-primary-dark: #1d4ed8;
    --brand-primary-rgb: 59, 130, 246;
    
    /* =================================================================
       BRAND COLORS - Secondary (Neutral Amber)
       ================================================================= */
    --brand-secondary: #f59e0b;
    --brand-secondary-dim: #d97706;
    --brand-secondary-dark: #b45309;
    --brand-secondary-rgb: 245, 158, 11;
    
    /* =================================================================
       SEMANTIC COLORS
       ================================================================= */
    --color-success: #22c55e;
    --color-success-rgb: 34, 197, 94;
    
    --color-warning: #f59e0b;
    --color-warning-dim: #d97706;
    --color-warning-rgb: 245, 158, 11;
    
    --color-error: #ef4444;
    --color-error-dim: #dc2626;
    --color-error-dark: #b91c1c;
    --color-error-rgb: 239, 68, 68;
    
    --color-info: #3b82f6;
    --color-info-dim: #2563eb;
    --color-info-rgb: 59, 130, 246;
    
    /* =================================================================
       BACKGROUND COLORS
       ================================================================= */
    --bg-page: #0f172a;
    --bg-page-rgb: 15, 23, 42;
    
    --bg-card: rgba(30, 41, 59, 0.95);
    --bg-card-solid: #1e293b;
    --bg-card-hover: rgba(51, 65, 85, 0.98);
    
    --bg-glass: rgba(30, 41, 59, 0.85);
    --bg-glass-light: rgba(59, 130, 246, 0.05);
    
    --bg-input: rgba(15, 23, 42, 0.8);
    --bg-input-focus: rgba(30, 41, 59, 0.9);
    
    --bg-overlay: rgba(0, 0, 0, 0.85);
    --bg-overlay-light: rgba(0, 0, 0, 0.5);
    
    --bg-game-stage: linear-gradient(180deg, 
        rgba(15, 23, 42, 0.97) 0%, 
        rgba(30, 41, 59, 0.95) 30%, 
        rgba(51, 65, 85, 0.93) 60%, 
        rgba(15, 23, 42, 0.97) 100%);
    
    /* =================================================================
       TEXT COLORS
       ================================================================= */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-disabled: #475569;
    
    --text-on-primary: #ffffff;
    --text-on-secondary: #0f172a;
    --text-on-error: #ffffff;
    
    /* =================================================================
       BORDER COLORS
       ================================================================= */
    --border-subtle: rgba(59, 130, 246, 0.15);
    --border-default: rgba(59, 130, 246, 0.3);
    --border-strong: rgba(59, 130, 246, 0.6);
    --border-intense: rgba(59, 130, 246, 0.8);
    
    --border-secondary: rgba(245, 158, 11, 0.5);
    --border-secondary-strong: rgba(245, 158, 11, 0.7);
    
    --border-neutral: rgba(255, 255, 255, 0.1);
    --border-neutral-strong: rgba(255, 255, 255, 0.2);
    
    /* =================================================================
       BORDER RADIUS
       ================================================================= */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 50%;
    
    /* =================================================================
       SHADOWS
       ================================================================= */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2);
    --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);
    --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.7);
    
    --shadow-inset-sm: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-inset-md: inset 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-inset-lg: inset 0 4px 12px rgba(0, 0, 0, 0.5);
    
    /* =================================================================
       GLOWS
       ================================================================= */
    --glow-primary-subtle: 0 0 10px rgba(59, 130, 246, 0.3);
    --glow-primary: 0 0 15px rgba(59, 130, 246, 0.5);
    --glow-primary-strong: 0 0 25px rgba(59, 130, 246, 0.7);
    --glow-primary-intense: 0 0 40px rgba(59, 130, 246, 0.8);
    
    --glow-secondary-subtle: 0 0 10px rgba(245, 158, 11, 0.3);
    --glow-secondary: 0 0 15px rgba(245, 158, 11, 0.5);
    --glow-secondary-strong: 0 0 25px rgba(245, 158, 11, 0.7);
    --glow-secondary-intense: 0 0 40px rgba(245, 158, 11, 0.8);
    
    --glow-error: 0 0 15px rgba(239, 68, 68, 0.5);
    
    --glow-card: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(59, 130, 246, 0.25);
    
    --glow-card-hover: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(59, 130, 246, 0.4);
    
    /* =================================================================
       GRADIENTS
       ================================================================= */
    --gradient-page: radial-gradient(circle at 50% 0%, 
        rgba(30, 41, 59, 1) 0%, 
        rgba(15, 23, 42, 1) 60%, 
        rgba(2, 6, 23, 1) 100%);
    
    --gradient-page-dark: radial-gradient(circle at 50% 0%, 
        rgba(15, 23, 42, 1) 0%, 
        rgba(2, 6, 23, 1) 60%, 
        rgba(0, 0, 0, 1) 100%);
    
    --gradient-card: linear-gradient(180deg, 
        rgba(30, 41, 59, 0.98) 0%, 
        rgba(15, 23, 42, 0.99) 100%);
    
    --gradient-card-angled: linear-gradient(145deg, 
        rgba(51, 65, 85, 0.98) 0%, 
        rgba(30, 41, 59, 0.99) 100%);
    
    --gradient-button-primary: linear-gradient(135deg, 
        var(--brand-primary) 0%, 
        var(--brand-primary-dim) 100%);
    
    --gradient-button-secondary: linear-gradient(135deg, 
        var(--brand-secondary) 0%, 
        var(--brand-secondary-dim) 100%);
    
    --gradient-button-subtle: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.15) 0%, 
        rgba(30, 64, 175, 0.3) 100%);
    
    --gradient-button-gold: linear-gradient(135deg, 
        rgba(245, 158, 11, 0.3) 0%, 
        rgba(180, 83, 9, 0.4) 100%);
    
    --gradient-button-danger: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.3) 0%, 
        rgba(185, 28, 28, 0.4) 100%);
    
    --gradient-premium: linear-gradient(135deg, 
        #ffd700 0%, 
        #ff8c00 50%, 
        #ffd700 100%);
    
    /* =================================================================
       TYPOGRAPHY
       ================================================================= */
    --font-display: 'Inter', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'Monaco', 'Consolas', monospace;
    
    --text-xs: 0.65rem;
    --text-sm: 0.75rem;
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    
    /* =================================================================
       LAYOUT & SIZING
       ================================================================= */
    --header-height: 60px;
    --footer-height: 70px;
    --banner-height: 40px;
    --chat-width: 420px;
    --sidebar-width: 300px;
    
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    
    /* =================================================================
       TRANSITIONS & ANIMATIONS
       ================================================================= */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.4s ease;
    
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* =================================================================
       Z-INDEX SCALE
       ================================================================= */
    --z-below: -1;
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-overlay: 2000;
    --z-modal: 5000;
    --z-popover: 7000;
    --z-toast: 9000;
    --z-tooltip: 9500;
    --z-max: 10000;
    
    /* =================================================================
       BREAKPOINTS
       ================================================================= */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    
    /* =================================================================
       BRAND ASSETS (Override in theme files)
       ================================================================= */
    --asset-avatar: url('/images/default-avatar.png');
    --asset-logo: url('/images/default-logo.png');
    --asset-wheel: url('/images/wheel.png');
    --asset-background: url('/images/default-background.jpg');
    --asset-gameover: url('/images/default-gameover.png');
    
    /* =================================================================
       GAME-SPECIFIC COLORS
       ================================================================= */
    --slot-wn-10: #22c55e;
    --slot-wn-20: #14b8a6;
    --slot-wn-50: #0d9488;
    --slot-wn-100: #06b6d4;
    --slot-try-again: #475569;
    --slot-try-again-alt: #334155;
    --slot-raffle: #a855f7;
    --slot-raffle-alt: #9333ea;
    --slot-free-spin: #f59e0b;
    --slot-instant-prize: #ef4444;
    --slot-instant-prize-alt: #dc2626;
    --slot-jackpot: #fbbf24;
    
    --prize-wn: var(--brand-primary);
    --prize-raffle: #a855f7;
    --prize-nft: #ef4444;
    --prize-jackpot: var(--brand-secondary);

    /* =================================================================
       GAME ASSETS & ICONS (Defaults)
       Can be overridden in themes
       ================================================================= */
    --icon-wn: "💰";
    --icon-ticket: "🎟️";
    --icon-prize: "🎁";
    --icon-jackpot: "🏆";
    --icon-free-spin: "🎡";
    --icon-miss: "😢";
    --icon-unknown: "❓";
    
    --asset-card-back: url('https://arcade-layer.netlify.app/images/prize-background.png');
    --bg-overlay-card-front: rgba(0, 0, 0, 0.8);
    
    /* =================================================================
       MINESWEEPER TILE COLORS
       Override in themes for different aesthetics
       ================================================================= */
    /* Unrevealed tiles */
    --tile-base: #4a3828;
    --tile-base-dark: #3a2818;
    --tile-border: rgba(100, 70, 40, 0.5);
    
    /* Hover state */
    --tile-hover: #5a4838;
    --tile-hover-dark: #4a3828;
    
    /* Revealed tiles */
    --tile-revealed: #2a1a10;
    --tile-revealed-dark: #1a0a05;
    --tile-revealed-border: rgba(50, 30, 15, 0.6);
    
    /* Flagged tiles */
    --tile-flagged: #4a3020;
    --tile-flagged-dark: #3a2010;
    
    /* Mine revealed */
    --tile-mine: #3a2010;
    --tile-mine-dark: #2a1005;
    
    /* Frame/border around grid */
    --tile-frame-light: #6b4423;
    --tile-frame-mid: #4a3018;
    --tile-frame-dark: #3a2010;
    
    /* Inner shadow highlights */
    --tile-highlight: rgba(255, 255, 255, 0.1);
    --tile-shadow: rgba(0, 0, 0, 0.3);
    
    /* =================================================================
       BACKGROUND OVERLAY CONTROLS
       Adjust transparency per theme
       ================================================================= */
    --bg-image-opacity: 0.55;
    --bg-vignette-opacity: 0.3;
    
    /* =================================================================
       LEGACY VARIABLE ALIASES (Backward compatibility)
       ================================================================= */
    --wryon-green: var(--brand-primary);
    --wryon-green-dim: var(--brand-primary-dim);
    --wryon-dark: var(--bg-page);
    --wryon-glow: var(--glow-primary);
    
    --greek-gold: var(--brand-secondary);
    --christmas-red: var(--color-error);
    --christmas-red-dark: var(--color-error-dark);
    --holly-green: #00563f;
    --snow-white: #f8f9fa;
    
    --gradient-hero: var(--gradient-page);
    --gradient-dark: var(--gradient-page);
    --gradient-green: var(--gradient-button-primary);
    --gradient-gold: var(--gradient-button-secondary);
    
    --bg-glass-heavy: var(--bg-glass);
    --bg-primary: var(--bg-page);
    --bg-dark: #050505;
    --border: var(--border-subtle);
    --border-glass: 1px solid var(--border-default);
    --border-green: 1px solid var(--border-default);
    --border-green-strong: 1px solid var(--border-strong);
    --border-gold: 1px solid var(--border-secondary);
    --hover-bg: var(--bg-glass-light);
    
    --shadow-premium: var(--shadow-lg);
    --shadow-glow-green: 0 0 40px rgba(var(--brand-primary-rgb), 0.2);
    --shadow-glow-gold: 0 0 30px rgba(var(--brand-secondary-rgb), 0.3);
    
    --chat-collapsed-height: 60px;
    --wallet-browser-extra-padding: 0px;
}

/* =================================================================
   ACCESSIBILITY
   ================================================================= */
@media (prefers-contrast: high) {
    :root {
        --border-default: rgba(59, 130, 246, 0.5);
        --border-strong: rgba(59, 130, 246, 0.8);
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-normal: 0s;
        --transition-slow: 0s;
        --transition-slower: 0s;
    }
}