/* ===== hekiGO Theme — Light & Dark mode ===== */

:root {
    /* Page backgrounds */
    --bg-page: linear-gradient(135deg, #ffd6e8 0%, #e8d5ff 50%, #d5e8ff 100%);
    --bg-body: #fce8f5;

    /* Card / surface backgrounds */
    --bg-card: #ffffff;
    --bg-surface: #fdf8ff;
    --bg-surface-alt: #fdf0ff;
    --bg-overlay: rgba(255, 255, 255, 0.92);
    --bg-overlay-strong: rgba(255, 255, 255, 0.96);
    --bg-overlay-soft: rgba(255, 255, 255, 0.7);
    --bg-overlay-dim: rgba(255, 255, 255, 0.55);
    --bg-input: #fdf0ff;
    --bg-hover: #f4eeff;
    --bg-hover-alt: #f0e8ff;
    --bg-active: #e0d0f8;
    --bg-selected: #e0d0ff;
    --bg-shimmer: linear-gradient(135deg, #f8eeff, #fff0f8, #eef0ff, #fff0f8, #f8eeff);

    /* Borders */
    --border-card: #f0a0cc;
    --border-subtle: #e0d0f0;
    --border-medium: #e8d0f8;
    --border-accent: #d0b8e8;
    --border-highlight: #e0b0f0;
    --border-divider: #f0d0f8;
    --border-focus: #a07aff;

    /* Text colors */
    --text-primary: #6040a0;
    --text-secondary: #8060b0;
    --text-tertiary: #9070b8;
    --text-muted: #b090d0;
    --text-faint: #c090d0;
    --text-placeholder: #c8b0e0;
    --text-copy: #c0a8d8;

    /* Brand gradient */
    --gradient-brand: linear-gradient(135deg, #ff7ab8, #a07aff, #7ab8ff);
    --gradient-brand-2: linear-gradient(135deg, #ff7ab8, #a07aff);
    --gradient-btn-primary: linear-gradient(135deg, #ff7ab8, #b07aff);
    --gradient-btn-secondary: linear-gradient(135deg, #c07aff, #7ab8ff);
    --gradient-btn-start: linear-gradient(135deg, #78d878, #40b8a0);
    --gradient-progress: linear-gradient(90deg, #ff7ab8, #a07aff);

    /* Accent colors */
    --accent-purple: #a07aff;
    --accent-purple-dark: #7050b0;
    --accent-purple-light: #c0a0e8;
    --accent-purple-bg: #f0e8ff;

    /* Shadows */
    --shadow-card: 0 8px 40px rgba(255, 120, 180, 0.25), 0 2px 8px rgba(180, 120, 255, 0.15);
    --shadow-card-hover: 0 12px 40px rgba(255, 120, 180, 0.3), 0 4px 12px rgba(180, 120, 255, 0.2);
    --shadow-btn: 0 4px 20px rgba(255, 100, 180, 0.4);
    --shadow-btn-hover: 0 8px 28px rgba(255, 100, 180, 0.5);
    --shadow-menu: 0 6px 24px rgba(180, 100, 220, 0.25);
    --shadow-subtle: 0 2px 10px rgba(160, 100, 220, 0.15);

    /* End screen overlay */
    --bg-end-overlay: rgba(180, 120, 220, 0.45);

    /* Disabled */
    --bg-disabled: #d0c8e0;

    /* Player colors (unchanged in dark mode — they're game state) */
    --color-blue: #7baeff;
    --color-yellow: #ffd95c;
    --color-magenta: #ff7ab8;
    --color-wild-ash: #c8c0d8;
}

/* ===== Dark Mode ===== */
[data-theme="dark"] {
    --bg-page: linear-gradient(135deg, #1a0e2e 0%, #1e1433 50%, #0e1a2e 100%);
    --bg-body: #141020;

    --bg-card: #1e1a2e;
    --bg-surface: #252040;
    --bg-surface-alt: #2a2248;
    --bg-overlay: rgba(30, 26, 46, 0.94);
    --bg-overlay-strong: rgba(30, 26, 46, 0.97);
    --bg-overlay-soft: rgba(30, 26, 46, 0.8);
    --bg-overlay-dim: rgba(30, 26, 46, 0.7);
    --bg-input: #252040;
    --bg-hover: #302850;
    --bg-hover-alt: #352d58;
    --bg-active: #403068;
    --bg-selected: #453570;
    --bg-shimmer: linear-gradient(135deg, #201838, #281830, #1a2038, #281830, #201838);

    --border-card: #6a3080;
    --border-subtle: #3a2860;
    --border-medium: #402e68;
    --border-accent: #5040a0;
    --border-highlight: #6a3080;
    --border-divider: #352858;
    --border-focus: #b090ff;

    --text-primary: #d0c0f0;
    --text-secondary: #b0a0d0;
    --text-tertiary: #9888b8;
    --text-muted: #7868a0;
    --text-faint: #6858a0;
    --text-placeholder: #584880;
    --text-copy: #584880;

    --gradient-brand: linear-gradient(135deg, #ff7ab8, #b090ff, #7ab8ff);
    --gradient-brand-2: linear-gradient(135deg, #ff7ab8, #b090ff);
    --gradient-btn-primary: linear-gradient(135deg, #e06898, #9060e0);
    --gradient-btn-secondary: linear-gradient(135deg, #a060e0, #6098e0);
    --gradient-btn-start: linear-gradient(135deg, #58b858, #30a088);
    --gradient-progress: linear-gradient(90deg, #e06898, #9060e0);

    --accent-purple: #b090ff;
    --accent-purple-dark: #9070d0;
    --accent-purple-light: #5040a0;
    --accent-purple-bg: #302050;

    --shadow-card: 0 8px 40px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(80, 40, 120, 0.3);
    --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(80, 40, 120, 0.35);
    --shadow-btn: 0 4px 20px rgba(140, 60, 160, 0.4);
    --shadow-btn-hover: 0 8px 28px rgba(140, 60, 160, 0.5);
    --shadow-menu: 0 6px 24px rgba(0, 0, 0, 0.4);
    --shadow-subtle: 0 2px 10px rgba(0, 0, 0, 0.3);

    --bg-end-overlay: rgba(10, 6, 20, 0.7);

    --bg-disabled: #3a3058;
}