/* Theme CSS for JamBeast */
/* 6 Color Themes: Light, Dark, Midnight, JamBeast, Ocean, Sunset */

/* ===== LIGHT THEME ===== */
:root,
[data-theme="light"] {
    --color-bg: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #f1f5f9;
    --color-text: #1f2937;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;

    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-light: #eef2ff;

    --color-chord: #dc2626;
    --color-chord-bg: #fef2f2;

    --color-success: #22c55e;
    --color-success-light: #dcfce7;
    --color-danger: #ef4444;
    --color-danger-light: #fef2f2;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;

    --color-card-bg: #ffffff;
    --color-input-bg: #ffffff;

    --color-accent: #8b5cf6;
    --color-accent-light: #ede9fe;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    --color-bg: #1a1a2e;
    --color-bg-secondary: #16213e;
    --color-bg-tertiary: #0f3460;
    --color-text: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-border: #334155;

    --color-primary: #818cf8;
    --color-primary-hover: #a5b4fc;
    --color-primary-light: #312e81;

    --color-chord: #fca5a5;
    --color-chord-bg: #7f1d1d;

    --color-success: #4ade80;
    --color-success-light: #14532d;
    --color-danger: #f87171;
    --color-danger-light: #7f1d1d;
    --color-warning: #fbbf24;
    --color-warning-light: #78350f;

    --color-card-bg: #16213e;
    --color-input-bg: #0f3460;

    --color-accent: #a78bfa;
    --color-accent-light: #4c1d95;
}

/* ===== MIDNIGHT THEME (True Black / OLED) ===== */
[data-theme="midnight"] {
    --color-bg: #000000;
    --color-bg-secondary: #0a0a0a;
    --color-bg-tertiary: #141414;
    --color-text: #ffffff;
    --color-text-secondary: #d4d4d4;
    --color-text-muted: #a3a3a3;
    --color-border: #262626;

    --color-primary: #a78bfa;
    --color-primary-hover: #c4b5fd;
    --color-primary-light: #2e1065;

    --color-chord: #fb7185;
    --color-chord-bg: #4c0519;

    --color-success: #4ade80;
    --color-success-light: #052e16;
    --color-danger: #f87171;
    --color-danger-light: #450a0a;
    --color-warning: #fbbf24;
    --color-warning-light: #451a03;

    --color-card-bg: #0a0a0a;
    --color-input-bg: #141414;

    --color-accent: #c084fc;
    --color-accent-light: #3b0764;
}

/* ===== JAMBEAST LIGHT THEME (Logo Colors on Light Background) ===== */
[data-theme="jambeast-light"] {
    --color-bg: #fafdf7;
    --color-bg-secondary: #f0f7e9;
    --color-bg-tertiary: #e2f0d5;
    --color-text: #14532d;
    --color-text-secondary: #166534;
    --color-text-muted: #15803d;
    --color-border: #bbf7d0;

    --color-primary: #16a34a;
    --color-primary-hover: #15803d;
    --color-primary-light: #dcfce7;

    --color-chord: #ea580c;
    --color-chord-bg: #ffedd5;

    --color-success: #16a34a;
    --color-success-light: #dcfce7;
    --color-danger: #dc2626;
    --color-danger-light: #fef2f2;
    --color-warning: #d97706;
    --color-warning-light: #fef3c7;

    --color-card-bg: #ffffff;
    --color-input-bg: #ffffff;

    --color-accent: #f97316;
    --color-accent-light: #ffedd5;
}

/* ===== JAMBEAST DARK THEME (Black BG with Logo Color Accents) ===== */
[data-theme="jambeast-dark"] {
    --color-bg: #000000;
    --color-bg-secondary: #0a0a0a;
    --color-bg-tertiary: #141414;
    --color-text: #f0fdf4;
    --color-text-secondary: #d4d4d4;
    --color-text-muted: #a3a3a3;
    --color-border: #262626;

    --color-primary: #22c55e;
    --color-primary-hover: #4ade80;
    --color-primary-light: #14532d;

    --color-chord: #fbbf24;
    --color-chord-bg: #422006;

    --color-success: #22c55e;
    --color-success-light: #14532d;
    --color-danger: #f87171;
    --color-danger-light: #450a0a;
    --color-warning: #fbbf24;
    --color-warning-light: #422006;

    --color-card-bg: #0a0a0a;
    --color-input-bg: #141414;

    --color-accent: #f97316;
    --color-accent-light: #431407;
}

/* ===== OCEAN LIGHT THEME ===== */
[data-theme="ocean-light"] {
    --color-bg: #f0f9ff;
    --color-bg-secondary: #e0f2fe;
    --color-bg-tertiary: #bae6fd;
    --color-text: #0c4a6e;
    --color-text-secondary: #075985;
    --color-text-muted: #0369a1;
    --color-border: #7dd3fc;

    --color-primary: #0284c7;
    --color-primary-hover: #0369a1;
    --color-primary-light: #e0f2fe;

    --color-chord: #0d9488;
    --color-chord-bg: #ccfbf1;

    --color-success: #059669;
    --color-success-light: #d1fae5;
    --color-danger: #dc2626;
    --color-danger-light: #fef2f2;
    --color-warning: #d97706;
    --color-warning-light: #fef3c7;

    --color-card-bg: #ffffff;
    --color-input-bg: #ffffff;

    --color-accent: #0891b2;
    --color-accent-light: #cffafe;
}

/* ===== OCEAN DARK THEME (Blue/Teal) ===== */
[data-theme="ocean-dark"] {
    --color-bg: #0c1929;
    --color-bg-secondary: #0f2744;
    --color-bg-tertiary: #133660;
    --color-text: #f0f9ff;
    --color-text-secondary: #bae6fd;
    --color-text-muted: #7dd3fc;
    --color-border: #1e4976;

    --color-primary: #38bdf8;
    --color-primary-hover: #7dd3fc;
    --color-primary-light: #0c4a6e;

    --color-chord: #2dd4bf;
    --color-chord-bg: #134e4a;

    --color-success: #34d399;
    --color-success-light: #064e3b;
    --color-danger: #fb7185;
    --color-danger-light: #881337;
    --color-warning: #fbbf24;
    --color-warning-light: #78350f;

    --color-card-bg: #0f2744;
    --color-input-bg: #133660;

    --color-accent: #22d3ee;
    --color-accent-light: #164e63;
}

/* ===== SUNSET LIGHT THEME ===== */
[data-theme="sunset-light"] {
    --color-bg: #fffbf5;
    --color-bg-secondary: #fef3e2;
    --color-bg-tertiary: #fed7aa;
    --color-text: #7c2d12;
    --color-text-secondary: #9a3412;
    --color-text-muted: #c2410c;
    --color-border: #fdba74;

    --color-primary: #ea580c;
    --color-primary-hover: #c2410c;
    --color-primary-light: #ffedd5;

    --color-chord: #db2777;
    --color-chord-bg: #fce7f3;

    --color-success: #16a34a;
    --color-success-light: #dcfce7;
    --color-danger: #dc2626;
    --color-danger-light: #fef2f2;
    --color-warning: #d97706;
    --color-warning-light: #fef3c7;

    --color-card-bg: #ffffff;
    --color-input-bg: #ffffff;

    --color-accent: #c026d3;
    --color-accent-light: #fae8ff;
}

/* ===== SUNSET DARK THEME (Warm Orange/Purple) ===== */
[data-theme="sunset-dark"] {
    --color-bg: #1c1017;
    --color-bg-secondary: #2d1a24;
    --color-bg-tertiary: #3d2433;
    --color-text: #fef2f2;
    --color-text-secondary: #fecaca;
    --color-text-muted: #fca5a5;
    --color-border: #5c3346;

    --color-primary: #fb923c;
    --color-primary-hover: #fdba74;
    --color-primary-light: #7c2d12;

    --color-chord: #f472b6;
    --color-chord-bg: #831843;

    --color-success: #4ade80;
    --color-success-light: #14532d;
    --color-danger: #f87171;
    --color-danger-light: #7f1d1d;
    --color-warning: #fcd34d;
    --color-warning-light: #713f12;

    --color-card-bg: #2d1a24;
    --color-input-bg: #3d2433;

    --color-accent: #e879f9;
    --color-accent-light: #701a75;
}

/* ===== AUTO THEME - Follows System Preference ===== */
/* Light mode by default for auto */
[data-theme="auto"] {
    --color-bg: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #f1f5f9;
    --color-text: #1f2937;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;

    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-light: #eef2ff;

    --color-chord: #dc2626;
    --color-chord-bg: #fef2f2;

    --color-success: #22c55e;
    --color-success-light: #dcfce7;
    --color-danger: #ef4444;
    --color-danger-light: #fef2f2;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;

    --color-card-bg: #ffffff;
    --color-input-bg: #ffffff;

    --color-accent: #8b5cf6;
    --color-accent-light: #ede9fe;
}

/* Dark mode for auto when system prefers dark */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --color-bg: #1a1a2e;
        --color-bg-secondary: #16213e;
        --color-bg-tertiary: #0f3460;
        --color-text: #f1f5f9;
        --color-text-secondary: #cbd5e1;
        --color-text-muted: #94a3b8;
        --color-border: #334155;

        --color-primary: #818cf8;
        --color-primary-hover: #a5b4fc;
        --color-primary-light: #312e81;

        --color-chord: #fca5a5;
        --color-chord-bg: #7f1d1d;

        --color-success: #4ade80;
        --color-success-light: #14532d;
        --color-danger: #f87171;
        --color-danger-light: #7f1d1d;
        --color-warning: #fbbf24;
        --color-warning-light: #78350f;

        --color-card-bg: #16213e;
        --color-input-bg: #0f3460;

        --color-accent: #a78bfa;
        --color-accent-light: #4c1d95;
    }
}

/* ===== THEME TRANSITION ===== */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== PRINT MODE - Always Light ===== */
@media print {
    :root,
    [data-theme="light"],
    [data-theme="dark"],
    [data-theme="jambeast-light"],
    [data-theme="jambeast-dark"],
    [data-theme="ocean-light"],
    [data-theme="ocean-dark"],
    [data-theme="sunset-light"],
    [data-theme="sunset-dark"] {
        --color-bg: #ffffff;
        --color-bg-secondary: #f8f9fa;
        --color-text: #212529;
        --color-text-muted: #6c757d;
        --color-border: #dee2e6;
        --color-chord: #dc2626;
        --color-primary: #4f46e5;
    }
}