/* ==========================================================================
   BoxFox Radio — Master Theme & Design Tokens
   Centralized Design System for Easy Customization & Re-Theming
   ========================================================================== */

:root {
    /* ======================================================================
       1. BRAND ACCENT PALETTE (Change these to re-theme the station!)
       Currently Active: Fox Orange & Warm Amber
       ====================================================================== */
    --accent-primary: #f97316;              /* Vivid Fox Orange */
    --accent-primary-hover: #ea580c;        /* Deeper Orange for hover */
    --accent-primary-active: #c2410c;       /* Pressed Orange */
    --accent-primary-glow: rgba(249, 115, 22, 0.4);
    --accent-primary-subtle: rgba(249, 115, 22, 0.12);
    --accent-primary-border: rgba(249, 115, 22, 0.35);

    --accent-secondary: #fb923c;            /* Warm Amber / Secondary Orange */
    --accent-secondary-glow: rgba(251, 146, 60, 0.35);
    --accent-secondary-subtle: rgba(251, 146, 60, 0.1);

    /* Status Colors */
    --color-live: #f97316;                  /* Studio Live Accent (matches Orange theme) */
    --color-live-glow: rgba(249, 115, 22, 0.6);
    --color-offline: #64748b;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;

    /* Backward compatibility mappings for older selectors */
    --accent-emerald: var(--accent-primary);
    --accent-emerald-glow: var(--accent-primary-glow);
    --accent-cyan: var(--accent-secondary);
    --accent-cyan-glow: var(--accent-secondary-glow);
    --accent-amber: #f59e0b;
    --accent-amber-glow: rgba(245, 158, 11, 0.35);
    --accent-rose: #ef4444;

    /* ======================================================================
       2. DARK GREY SURFACE & BACKGROUND PALETTE
       ====================================================================== */
    --bg-base: #0f1115;                     /* Deep Charcoal / Dark Grey Canvas */
    --bg-surface: rgba(22, 26, 33, 0.88);   /* Dark Grey Glass Surface */
    --bg-surface-solid: #161a21;            /* Opaque Dark Grey */
    --bg-surface-elevated: #1e232d;         /* Elevated Container */
    --bg-surface-hover: #262c37;            /* Hover Surface */
    --bg-surface-active: #2e3543;
    
    --bg-card-border: rgba(255, 255, 255, 0.08);
    --bg-card-border-glow: var(--accent-primary-border);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: #2a313d;
    --border-focus: var(--accent-primary);

    /* Ambient Background Glow Particles */
    --glow-color-1: rgba(249, 115, 22, 0.22);  /* Primary Orange Ember */
    --glow-color-2: rgba(234, 88, 12, 0.18);   /* Deep Amber Ember */
    --glow-color-3: rgba(217, 119, 6, 0.14);   /* Warm Gold Glow */

    /* ======================================================================
       3. TEXT & CONTRAST
       ====================================================================== */
    --text-primary: #f8fafc;                /* Crisp Off-White */
    --text-secondary: #94a3b8;              /* Soft Slate Grey */
    --text-muted: #64748b;                  /* Muted Grey */
    --text-on-accent: #ffffff;

    /* ======================================================================
       4. GEOMETRY & RADII (Crisp, Less Rounded Studio Hardware Aesthetic)
       ====================================================================== */
    --radius-lg: 8px;                       /* Cards & Drawers (Was 24px) */
    --radius-md: 6px;                       /* Inner Panels & Stat Boxes (Was 16px) */
    --radius-sm: 4px;                       /* Buttons, Code Blocks & Pills (Was 8px) */
    --radius-xs: 2px;
    --radius-full: 6px;                     /* Replaced 9999px pills with crisp 6px */
    --radius-circle: 50%;                   /* Only for circular Play button & avatar icons */

    /* ======================================================================
       5. SHADOWS & AMBIENT DEPTH
       ====================================================================== */
    --shadow-card: 0 20px 45px -10px rgba(0, 0, 0, 0.65), 0 0 35px rgba(249, 115, 22, 0.06);
    --shadow-btn: 0 8px 20px -4px rgba(249, 115, 22, 0.45);
    --shadow-glow: 0 0 25px var(--accent-primary-glow);

    /* ======================================================================
       6. TYPOGRAPHY
       ====================================================================== */
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* ==========================================================================
   FUTURE THEME PRESETS (Easily switch by setting data-theme="..." on <html>)
   ========================================================================== */

/* Cyberpunk Cyan Theme */
[data-theme="cyan"] {
    --accent-primary: #06b6d4;
    --accent-primary-hover: #0891b2;
    --accent-primary-glow: rgba(6, 182, 212, 0.4);
    --accent-primary-subtle: rgba(6, 182, 212, 0.12);
    --accent-primary-border: rgba(6, 182, 212, 0.35);
    --accent-secondary: #38bdf8;
    --glow-color-1: rgba(6, 182, 212, 0.22);
    --glow-color-2: rgba(56, 189, 248, 0.18);
}

/* Emerald Matrix Theme */
[data-theme="emerald"] {
    --accent-primary: #10b981;
    --accent-primary-hover: #059669;
    --accent-primary-glow: rgba(16, 185, 129, 0.4);
    --accent-primary-subtle: rgba(16, 185, 129, 0.12);
    --accent-primary-border: rgba(16, 185, 129, 0.35);
    --accent-secondary: #34d399;
    --glow-color-1: rgba(16, 185, 129, 0.22);
    --glow-color-2: rgba(52, 211, 153, 0.18);
}

/* Synthwave Neon Violet Theme */
[data-theme="violet"] {
    --accent-primary: #8b5cf6;
    --accent-primary-hover: #7c3aed;
    --accent-primary-glow: rgba(139, 92, 246, 0.4);
    --accent-primary-subtle: rgba(139, 92, 246, 0.12);
    --accent-primary-border: rgba(139, 92, 246, 0.35);
    --accent-secondary: #ec4899;
    --glow-color-1: rgba(139, 92, 246, 0.22);
    --glow-color-2: rgba(236, 72, 153, 0.18);
}