/* Theme variables and design system */

/* PALETTE (Source: assets/gruvbox.json) */
:root {
    /* Gruvbox Dark Muted */
    --gruv-dark-bg: #282828;
    --gruv-dark-red: #cc241d;
    --gruv-dark-green: #98971a;
    --gruv-dark-yellow: #d79921;
    --gruv-dark-blue: #458588;
    --gruv-dark-purple: #b16286;
    --gruv-dark-aqua: #689d6a;
    --gruv-dark-orange: #d65d0e;
    --gruv-dark-fg: #a89984;

    /* Gruvbox Dark Strong (Bright) */
    --gruv-bright-bg: #928374;
    --gruv-bright-red: #fb4934;
    --gruv-bright-green: #b8bb26;
    --gruv-bright-yellow: #fabd2f;
    --gruv-bright-blue: #83a598;
    --gruv-bright-purple: #d3869b;
    --gruv-bright-aqua: #8ec07c;
    --gruv-bright-orange: #fe8019;
    --gruv-bright-fg: #ebdbb2;

    /* Gruvbox Light Muted/Strong handled via overrides below */

    /* Dark Theme Surfaces (Backgrounds) */
    --dark-bg-0: #1d2021;
    --dark-bg-1: #32302f;
    --dark-bg-2: #3c3836;
    --dark-bg-3: #504945;
    --dark-bg-4: #665c54;
    --dark-bg-5: #7c6f64;

    /* Dark Theme Surfaces (Foregrounds) */
    --dark-fg-0: #fbf1c7;
    --dark-fg-1: #fbf1c7;
    --dark-fg-2: #ebdbb2;
    --dark-fg-3: #d5c4a1;
    --dark-fg-4: #bdae93;
    --dark-fg-5: #a89984;

    /* Light Theme Surfaces (Backgrounds) */
    --light-bg-0: #f9f5d7;
    --light-bg-1: #f2e5bc;
    --light-bg-2: #ebdbb2;
    --light-bg-3: #d5c4a1;
    --light-bg-4: #bdae93;
    --light-bg-5: #a89984;

    /* Light Theme Surfaces (Foregrounds) */
    --light-fg-0: #282828;
    --light-fg-1: #282828;
    --light-fg-2: #3c3836;
    --light-fg-3: #504945;
    --light-fg-4: #665c54;
    --light-fg-5: #7c6f64;

    /* Global Accent Colors (Source: assets/gruvbox.json) */
    --accent-red: #cc241d;
    --accent-green: #98971a;
    --accent-yellow: #d79921;
    --accent-blue: #458588;
    --accent-orange: #d65d0e;
}

/* Dark Theme (Gruvbox Dark) - Default */
:root {
    color-scheme: dark;
    --bg-primary: var(--dark-bg-0);
    --bg-secondary: var(--dark-bg-1);
    --bg-card: var(--dark-bg-2);
    --border-card: var(--dark-bg-3);

    /* Slots */
    --bg-slot: rgba(0, 0, 0, 0.3);
    --bg-slot-hover: rgba(0, 0, 0, 0.5);

    /* Text */
    --text-primary: var(--dark-fg-2);
    --text-secondary: var(--dark-fg-5);
    --text-gold: var(--gruv-bright-yellow);

    /* Button System (Dark) */
    --btn-primary-bg-start: var(--gruv-dark-green);
    --btn-primary-bg-end: #79740e;
    --btn-primary-text: #fbf1c7;
    --btn-primary-active: var(--gruv-bright-green);

    --btn-secondary-bg-start: var(--dark-bg-4);
    --btn-secondary-bg-end: var(--dark-bg-2);
    --btn-secondary-border: var(--dark-bg-5);
    --btn-secondary-text: var(--dark-fg-2);
    --btn-secondary-active: var(--dark-bg-3);

    --btn-danger-bg-start: var(--gruv-dark-red);
    --btn-danger-bg-end: #9d0006;
    --btn-danger-text: #fbf1c7;
    --btn-danger-active: var(--gruv-bright-red);

    /* Marked Slots (Dark) */
    --bg-marked: rgba(184, 187, 38, 0.4);
    --bg-marked-hover: rgba(184, 187, 38, 0.5);
    --shadow-marked: inset 0 0 10px rgba(184, 187, 38, 0.6);

    --bg-shiny-marked: rgba(250, 189, 47, 0.3);
    --shadow-shiny-marked: inset 0 0 10px rgba(250, 189, 47, 0.5);

    --bg-dual-marked: #d65d0e;
    --shadow-dual-marked: 0 0 15px rgba(214, 93, 14, 0.5);

    /* Progress Bars (Dark) */
    --progress-bg: #000;
    --progress-fill-start: #d3d62a;
    --progress-fill-mid: #b8bb26;
    --progress-fill-end: #98971a;
    --progress-shadow: 0 0 8px rgba(184, 187, 38, 0.5);

    /* Modals (Dark) */
    --modal-overlay: rgba(0, 0, 0, 0.7);

    /* Skeuomorphic Shadows (Dark) */
    --shadow-raised: 
        inset 1px 1px 0 rgba(255, 255, 255, 0.1),
        4px 4px 0px var(--dark-bg-0),
        4px 4px 8px rgba(0,0,0,0.5);
    
    --shadow-recessed: 
        inset 3px 3px 6px rgba(0, 0, 0, 0.6),
        inset -1px -1px 0 rgba(255, 255, 255, 0.05);

    --shadow-text: 2px 2px 0px var(--dark-bg-0);

    /* Card Context Shadows (Dark) */
    --shadow-card-raised: 
        inset 1px 1px 0 rgba(255, 255, 255, 0.05),
        4px 4px 0px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0,0,0,0.3);
        
    --shadow-card-hover: 
        inset 1px 1px 0 rgba(255, 255, 255, 0.1),
        0 0 15px rgba(254, 128, 25, 0.2),
        6px 6px 0px rgba(0,0,0,0.5);

    /* Sticker labels (Dark) */
    --sticker-bg-start: var(--dark-bg-0);
    --sticker-bg-end: var(--dark-bg-2);
    --sticker-text: var(--dark-fg-2);
    --sticker-border: var(--dark-bg-4);

    /* Floating Buttons (Dark) */
    --floating-bg-start: #504945;
    --floating-bg-end: #282828;
    --floating-text: var(--dark-fg-2);
    --floating-shadow-glow: rgba(0, 0, 0, 0.6);

    --jewel-well: var(--dark-bg-0);
    --jewel-off-start: var(--dark-bg-3);
    --jewel-off-end: var(--dark-bg-1);

    /* Input/LCD System (Dark) */
    --bg-input: var(--dark-bg-0);
    --bg-input-focus: var(--dark-bg-1);
    --input-scanline: rgba(255, 255, 255, 0.07);
    /* Light scanlines for dark bg */
    --input-border: var(--dark-bg-3);

    /* Scrollbar (Dark) */
    --scrollbar-track: var(--dark-bg-0);
    --scrollbar-thumb: var(--dark-bg-4);
    --scrollbar-thumb-border: var(--dark-bg-0);
    --scrollbar-thumb-hover: var(--dark-bg-5);
    --scrollbar-shadow: rgba(0, 0, 0, 0.3);

    --border-radius: 8px;
}

/* Light Theme (Gruvbox Light) */
html.light-theme {
    color-scheme: light;
    --bg-primary: var(--light-bg-0);
    --bg-secondary: var(--light-bg-1);
    --bg-card: var(--light-bg-2);
    --border-card: var(--light-bg-3);

    /* Slots */
    --bg-slot: var(--light-bg-1);
    --bg-slot-hover: var(--light-bg-3);

    /* Text */
    --text-primary: var(--light-fg-2);
    --text-secondary: var(--light-fg-5);
    --text-gold: #b57614;

    /* Marked Slots (Light) */
    --bg-marked: var(--gruv-bright-green);
    --bg-marked-hover: var(--gruv-dark-green);
    --shadow-marked: inset 2px 2px 4px rgba(0, 0, 0, 0.1);

    --bg-shiny-marked: #fabd2f;
    --shadow-shiny-marked: inset 2px 2px 4px rgba(0, 0, 0, 0.1);

    --bg-dual-marked: #d65d0e;
    --shadow-dual-marked: 0 0 12px rgba(214, 93, 14, 0.5);

    /* Progress Bars (Light) */
    --progress-bg: var(--light-bg-4);
    --progress-fill-start: #79740e;
    --progress-fill-mid: #98971a;
    --progress-fill-end: #427b58;
    --progress-shadow: none;

    /* Modals (Light) */
    --modal-overlay: rgba(0, 0, 0, 0.3);

    /* Button System (Light) */
    --btn-primary-bg-start: #79740e;
    --btn-primary-bg-end: #427b58;
    --btn-primary-text: #f9f5d7;
    --btn-primary-active: #98971a;

    --btn-secondary-bg-start: var(--light-bg-0);
    --btn-secondary-bg-end: var(--light-bg-2);
    --btn-secondary-border: var(--light-bg-4);
    --btn-secondary-text: var(--light-fg-2);
    --btn-secondary-active: var(--light-bg-3);

    --btn-danger-bg-start: #9d0006;
    --btn-danger-bg-end: #72241d;
    --btn-danger-text: #f9f5d7;
    --btn-danger-active: #cc241d;

    /* Skeuomorphic Shadows (Light) */
    --shadow-raised: 
        inset 1px 1px 0 rgba(255, 255, 255, 0.8),
        4px 4px 0px rgba(0,0,0,0.1),
        4px 4px 8px rgba(0,0,0,0.05);

    --shadow-recessed: 
        inset 2px 2px 4px rgba(0,0,0,0.15),
        inset -1px -1px 0 rgba(255,255,255,1);

    --shadow-text: none;

    /* Card Context Shadows (Light) */
    --shadow-card-raised: 
        inset 1px 1px 0 rgba(255, 255, 255, 0.9),
        4px 4px 0px rgba(0,0,0,0.1),
        0 4px 8px rgba(0,0,0,0.05);
        
    --shadow-card-hover: 
        inset 1px 1px 0 rgba(255, 255, 255, 1),
        4px 10px 0px rgba(0,0,0,0.1),
        0 10px 20px rgba(0,0,0,0.08);

    /* Sticker labels (Light) */
    --sticker-bg-start: var(--dark-fg-0);
    --sticker-bg-end: var(--dark-fg-3);
    --sticker-text: var(--dark-bg-2);
    --sticker-border: var(--dark-fg-5);

    /* Floating Buttons (Light) */
    --floating-bg-start: var(--light-bg-0);
    --floating-bg-end: var(--light-bg-2);
    --floating-text: var(--light-fg-2);
    --floating-shadow-glow: rgba(189, 174, 147, 0.5);

    /* Jewel Toggles (Light) */
    --jewel-well: var(--light-bg-1);
    --jewel-off-start: var(--light-bg-2);
    --jewel-off-end: var(--light-bg-4);

    /* Input/LCD System (Light) */
    --bg-input: #e0dcb8;
    /* GameBoy Greenish Grey */
    --bg-input-focus: #f0ebd6;
    /* Brighter */
    --input-scanline: rgba(0, 0, 0, 0.07);
    --input-border: var(--light-bg-4);

    /* Scrollbar (Light) */
    --scrollbar-track: var(--light-bg-0);
    --scrollbar-thumb: #bdae93;
    /* light-bg-4 */
    --scrollbar-thumb-border: var(--light-bg-0);
    --scrollbar-thumb-hover: #a89984;
    /* light-bg-5 */
    --scrollbar-shadow: rgba(0, 0, 0, 0.1);
}

/* Global Application */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

html.light-theme body {
    background: var(--bg-primary);
}

html.light-theme h1,
html.light-theme h2,
html.light-theme h3 {
    color: var(--text-primary);
    text-shadow: none;
}

/* Specific Component Overrides for Light Mode */
html.light-theme .box {
    background: var(--bg-card);
    box-shadow: var(--shadow-raised);
    border: 1px solid var(--border-card);
}

html.light-theme .pokemon-slot {
    background: var(--bg-slot);
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.1),
        inset -1px -1px 0 rgba(255, 255, 255, 0.6);
    border: none;
}

html.light-theme .pokemon-slot:hover {
    background: var(--bg-slot-hover);
}

/* Marks in Light Mode */
html.light-theme .pokemon-slot.marked {
    background: var(--gruv-bright-green);
    border: 1px solid #79740e;

    /* Pop Out Effect Light */
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    z-index: 1;
}

html.light-theme .pokemon-slot.shiny-marked {
    background: #fabd2f;
    /* darkStrong.yellow */
    border: 1px solid #b57614;

    /* Pop Out Effect Light */
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    z-index: 1;
}

html.light-theme .pokemon-slot.marked.shiny-marked {
    background: #d65d0e;
    /* gruv-dark-orange */
    border: 1.5px solid #af3a03;
    box-shadow:
        0 4px 8px rgba(214, 93, 14, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

html.light-theme .pokemon-slot.marked .pokemon-name,
html.light-theme .pokemon-slot.shiny-marked .pokemon-name {
    color: #282828;
}

html.light-theme .modal-content {
    background: var(--bg-card);
    box-shadow: var(--shadow-raised);
    border: 1px solid #fff;
}