/* BOTB Theme Variables
   Light Mode: Dynamicron (Sony Dynamicron L-750 VHS Tape)
   Dark Mode: Supertape (Radio Shack Supertape HG T-120)
*/

:root {
    /* =========================================
       LIGHT MODE - DYNAMICRON THEME
       Warm creams, oranges, and silver accents
       ========================================= */
    --bg-primary: #FDF6E9;
    --bg-secondary: #FAF0DC;
    --bg-elevated: #FFF9EE;

    --surface: #FAF0DC;
    --surface-hover: #F5E8D0;
    --surface-active: #EFE0C5;

    --primary: #E85D04;
    --primary-hover: #D45003;
    --primary-light: #FF7B2E;

    --secondary: #DC2626;
    --secondary-hover: #B91C1C;

    --text-primary: #1A1A1A;
    --text-secondary: #4A4A4A;
    --text-muted: #6B6B6B;
    --text-inverse: #FFFFFF;

    --accent: #C0C0C0;
    --accent-gold: #B8860B;
    --accent-yellow: #FFD700;

    --border: #E8DCC8;
    --border-strong: #D4C4A8;

    --success: #059669;
    --warning: #E85D04;
    --error: #DC2626;
    --info: #0284C7;

    /* Button text colors */
    --btn-primary-text: #FFFFFF;

    /* VHS Rainbow Stripes (Dynamicron style) */
    --stripe-1: #DC2626;  /* Red */
    --stripe-2: #E85D04;  /* Orange */
    --stripe-3: #FFD700;  /* Yellow */
    --stripe-4: #059669;  /* Green */

    /* Vinyl Record Colors */
    --vinyl-black: #1A1A1A;
    --vinyl-groove: #333333;
    --vinyl-label: #E85D04;
    --vinyl-shine: rgba(255, 255, 255, 0.1);

    /* VHS Effects */
    --vhs-scanline: rgba(0, 0, 0, 0.03);
    --vhs-noise: rgba(0, 0, 0, 0.02);
    --vhs-glow: rgba(232, 93, 4, 0.3);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-vinyl: 0 8px 32px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;

    /* Fonts */
    --font-display: 'Oswald', 'Impact', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
}

/* =========================================
   DARK MODE - SUPERTAPE THEME
   Deep navy, black, gold and rainbow accents
   ========================================= */
[data-theme="dark"] {
    --bg-primary: #0A0A12;
    --bg-secondary: #12121F;
    --bg-elevated: #1A1A2E;

    --surface: #12121F;
    --surface-hover: #1A1A2E;
    --surface-active: #222238;

    --primary: #FFD700;
    --primary-hover: #FFC107;
    --primary-light: #FFE44D;

    --secondary: #1E3A5F;
    --secondary-hover: #2A4A73;

    --text-primary: #F5F5F5;
    --text-secondary: #A0A0B0;
    --text-muted: #6B6B80;
    --text-inverse: #0A0A12;

    --accent: #3B82F6;
    --accent-gold: #FFD700;
    --accent-metallic: #C0C0C0;

    --border: #2A2A3E;
    --border-strong: #3A3A52;

    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;

    /* Button text colors - dark text on gold buttons */
    --btn-primary-text: #0A0A12;

    /* VHS Rainbow Stripes (Supertape style) */
    --stripe-1: #EF4444;  /* Red */
    --stripe-2: #F59E0B;  /* Orange/Amber */
    --stripe-3: #10B981;  /* Green */
    --stripe-4: #3B82F6;  /* Blue */

    /* Vinyl Record Colors */
    --vinyl-black: #0D0D0D;
    --vinyl-groove: #1A1A1A;
    --vinyl-label: #FFD700;
    --vinyl-shine: rgba(255, 255, 255, 0.05);

    /* VHS Effects */
    --vhs-scanline: rgba(255, 255, 255, 0.02);
    --vhs-noise: rgba(255, 255, 255, 0.01);
    --vhs-glow: rgba(255, 215, 0, 0.2);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-vinyl: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Theme transition */
* {
    transition: background-color var(--transition-normal),
                color var(--transition-normal),
                border-color var(--transition-normal);
}