/* Theme CSS for The Look Up */

/* Green Theme Variables (Default) */
:root,
[data-theme="green"] {
    --bg-gradient-start: #1e3a2c;
    --bg-gradient-end: #0f1a14;
    --primary-color: #00cc66;
    --secondary-color: #32cd32;
    --accent-color: #33ff77;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --card-bg: rgba(0, 0, 0, 0.70);
    --card-bg-secondary: rgba(255, 255, 255, 0.015);
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-bg-focus: rgba(255, 255, 255, 0.08);
    --input-text: #ffffff;
    --overlay-bg: rgba(0, 0, 0, 0.98);
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-color: rgba(0, 204, 102, 0.5);
    --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    --button-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    --button-hover-text: white;
    --button-active-text: white;
}

/* Blue Theme Variables */
[data-theme="blue"] {
    --bg-gradient-start: #1e2a3a;
    --bg-gradient-end: #0f1419;
    --primary-color: #00bfff;
    --secondary-color: #1e90ff;
    --accent-color: #33ccff;
    --text-primary: #fff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --card-bg: rgba(0, 0, 0, 0.70);
    --card-bg-secondary: rgba(255, 255, 255, 0.015);
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-bg-focus: rgba(255, 255, 255, 0.08);
    --input-text: #ffffff;
    --overlay-bg: rgba(0, 0, 0, 0.98);
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-color: rgba(0, 191, 255, 0.5);
    --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    --button-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    --button-hover-text: white;
    --button-active-text: white;
}

/* Red Theme Variables */
[data-theme="red"] {
    --bg-gradient-start: #3a1e1e;
    --bg-gradient-end: #1a0f0f;
    --primary-color: #ff4444;
    --secondary-color: #ff6b6b;
    --accent-color: #ff7777;
    --text-primary: #fff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --card-bg: rgba(0, 0, 0, 0.70);
    --card-bg-secondary: rgba(255, 255, 255, 0.015);
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-bg-focus: rgba(255, 255, 255, 0.08);
    --input-text: #ffffff;
    --overlay-bg: rgba(0, 0, 0, 0.98);
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-color: rgba(255, 68, 68, 0.5);
    --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    --button-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    --button-hover-text: white;
    --button-active-text: white;
}

/* Pink Theme Variables */
[data-theme="pink"] {
    --bg-gradient-start: #3a1e3a;
    --bg-gradient-end: #1a0f1a;
    --primary-color: #ff69b4;
    --secondary-color: #ff1493;
    --accent-color: #ff88cc;
    --text-primary: #fff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --card-bg: rgba(0, 0, 0, 0.70);
    --card-bg-secondary: rgba(255, 255, 255, 0.015);
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-bg-focus: rgba(255, 255, 255, 0.08);
    --input-text: #ffffff;
    --overlay-bg: rgba(0, 0, 0, 0.98);
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-color: rgba(255, 105, 180, 0.5);
    --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    --button-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    --button-hover-text: white;
    --button-active-text: white;
}

/* Yellow Theme Variables */
[data-theme="yellow"] {
    --bg-gradient-start: #3a3a1e;
    --bg-gradient-end: #1a1a0f;
    --primary-color: #ffd700;
    --secondary-color: #ffed4e;
    --accent-color: #ffee44;
    --text-primary: #fff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --card-bg: rgba(0, 0, 0, 0.70);
    --card-bg-secondary: rgba(255, 255, 255, 0.015);
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-bg-focus: rgba(255, 255, 255, 0.08);
    --input-text: #ffffff;
    --overlay-bg: rgba(0, 0, 0, 0.98);
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-color: rgba(255, 215, 0, 0.5);
    --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    --button-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    --button-hover-text: #000000;
    --button-active-text: #000000;
}

/* Monochrome Theme Variables */
[data-theme="monochrome"] {
    --bg-gradient-start: #2a2a2a;
    --bg-gradient-end: #0f0f0f;
    --primary-color: #ffffff;
    --secondary-color: #cccccc;
    --accent-color: #e0e0e0;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --card-bg: rgba(0, 0, 0, 0.70);
    --card-bg-secondary: rgba(255, 255, 255, 0.015);
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-bg-focus: rgba(255, 255, 255, 0.08);
    --input-text: #ffffff;
    --overlay-bg: rgba(0, 0, 0, 0.98);
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-color: rgba(255, 255, 255, 0.3);
    --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    --button-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    --button-hover-text: #000000;
    --button-active-text: #000000;
}