/* master.css - SSH Club base theme (Energy-Aware) */

/* ===== THEMES ===== */
/* Green (default – your existing values) */
:root {
    --color-bg: rgb(15, 15, 0);
    --color-text-primary: rgb(0, 220, 0);
    --color-text-secondary: rgb(70, 100, 70);
    --color-accent: rgb(0, 200, 0);
    --color-accent-bright: rgb(0, 240, 0);
    --color-error: rgb(210, 0, 0);
    --color-border: rgb(0, 200, 0);
    --color-secondary-border: rgb(0, 150, 100);
    --color-signature: rgb(150, 0, 100);
    --color-bg-subtle-glow: rgb(0, 25, 10);
    /* Base styles (font, spacing, etc.) */
    --font-family: 'Fira Code', 'Courier New', monospace;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --spacing-unit: 10px;
    --border-radius: 0px;
    --border-width: 1px;
    --padding: 10px;
    --font-size-lg: 16px;
}

/* GREEN theme (Classic) */
[data-theme="green"] {
    --color-bg: rgb(15, 15, 0);
    --color-text-primary: rgb(0, 220, 0);
    --color-text-secondary: rgb(70, 100, 70);
    --color-accent: rgb(0, 200, 0);
    --color-accent-bright: rgb(0, 240, 0);
    --color-error: rgb(210, 0, 0);
    --color-border: rgb(0, 200, 0);
    --color-secondary-border: rgb(0, 150, 100);
    --color-signature: rgb(150, 0, 100);
    --color-bg-subtle-glow: rgb(0, 25, 10);
}

/* RED theme (Refined for contrast and aesthetic) */
[data-theme="red"] {
    --color-bg: rgb(20, 0, 0); /* Darker, true red tint instead of purple */
    --color-text-primary: rgb(255, 50, 50); /* Brightened for readability */
    --color-text-secondary: rgb(150, 60, 60);
    --color-accent: rgb(200, 0, 0);
    --color-accent-bright: rgb(255, 80, 80);
    --color-error: rgb(255, 100, 0); /* Orange error for red theme visibility */
    --color-border: rgb(200, 0, 0);
    --color-secondary-border: rgb(255, 100, 0); /* Amber accents */
    --color-signature: rgb(0, 200, 200); /* Cyan signature for contrast */
    --color-bg-subtle-glow: rgb(40, 0, 0);
}

/* BLUE theme (Refined to fix low-contrast readability issues) */
[data-theme="blue"] {
    --color-bg: rgb(0, 10, 25); /* Deep ocean blue */
    --color-text-primary: rgb(100, 200, 255); /* CRT Cyan-Blue, much easier to read */
    --color-text-secondary: rgb(60, 90, 120);
    --color-accent: rgb(0, 130, 200);
    --color-accent-bright: rgb(150, 220, 255);
    --color-error: rgb(255, 50, 50);
    --color-border: rgb(0, 130, 200);
    --color-secondary-border: rgb(0, 200, 180); /* Teal accents */
    --color-signature: rgb(255, 200, 0); /* Gold/yellow signature for contrast */
    --color-bg-subtle-glow: rgb(0, 20, 40);
}

/* === NEW THEMES === */

/* AMBER theme (Classic Unix/Terminal aesthetic) */
[data-theme="amber"] {
    --color-bg: rgb(20, 10, 0);
    --color-text-primary: rgb(255, 176, 0);
    --color-text-secondary: rgb(150, 100, 0);
    --color-accent: rgb(200, 130, 0);
    --color-accent-bright: rgb(255, 200, 50);
    --color-error: rgb(255, 50, 50);
    --color-border: rgb(200, 130, 0);
    --color-secondary-border: rgb(255, 80, 0); /* Deep orange */
    --color-signature: rgb(0, 255, 150); /* Mint green signature */
    --color-bg-subtle-glow: rgb(40, 20, 0);
}

/* SYNTHWAVE theme (Neon Cyberpunk vibes) */
[data-theme="synthwave"] {
    --color-bg: rgb(15, 5, 25); /* Dark purple */
    --color-text-primary: rgb(255, 100, 255); /* Hot pink text */
    --color-text-secondary: rgb(120, 60, 140);
    --color-accent: rgb(0, 255, 255); /* Cyan accents */
    --color-accent-bright: rgb(150, 255, 255);
    --color-error: rgb(255, 200, 0);
    --color-border: rgb(255, 0, 200);
    --color-secondary-border: rgb(0, 255, 255);
    --color-signature: rgb(255, 255, 0); /* Electric yellow */
    --color-bg-subtle-glow: rgb(40, 0, 60);
}

/* MONO theme (Minimalist High-Contrast) */
[data-theme="mono"] {
    --color-bg: rgb(10, 10, 10); /* Almost black */
    --color-text-primary: rgb(220, 220, 220); /* Crisp off-white */
    --color-text-secondary: rgb(100, 100, 100);
    --color-accent: rgb(180, 180, 180);
    --color-accent-bright: rgb(255, 255, 255);
    --color-error: rgb(255, 80, 80);
    --color-border: rgb(150, 150, 150);
    --color-secondary-border: rgb(80, 80, 80);
    --color-signature: rgb(255, 255, 0); /* Classic yellow marker */
    --color-bg-subtle-glow: rgb(30, 30, 30);
}
/* MIKU theme (Hatsune Miku - Vocaloid) */
[data-theme="miku"] {
    --color-bg: rgb(10, 20, 25); /* Dark blueish-black */
    --color-text-primary: rgb(150, 240, 240); /* Light cyan for readability */
    --color-text-secondary: rgb(80, 120, 130);
    --color-accent: rgb(57, 197, 187); /* Classic Miku Teal #39C5BB */
    --color-accent-bright: rgb(120, 255, 240); /* Bright glowing cyan */
    --color-error: rgb(255, 50, 50);
    --color-border: rgb(57, 197, 187);
    --color-secondary-border: rgb(255, 100, 180); /* Hot pink accents (ties/headset) */
    --color-signature: rgb(255, 0, 150); /* Magenta signature */
    --color-bg-subtle-glow: rgb(0, 40, 50);
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    padding: calc(var(--spacing-unit) * 2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-accent);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-accent-bright);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-bg);
}

/* Base form elements */
input,
button,
textarea {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    border: var(--border-width) solid var(--color-border);
    padding: var(--spacing-unit);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    transition: all 0.2s ease-in-out;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-accent-bright);
    box-shadow: 0 0 8px var(--color-accent);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
}

button {
    background-color: transparent;
    color: var(--color-accent-bright);
    border: var(--border-width) solid var(--color-accent);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    cursor: pointer;
    text-align: center;
}

button:hover {
    background-color: var(--color-accent);
    color: var(--color-bg);
    box-shadow: 0 0 10px var(--color-accent);
}

a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

a:hover {
    color: var(--color-accent-bright);
    text-decoration: underline;
}

pre {
    font-family: var(--font-family);
    white-space: pre;
    margin: 0;
    line-height: 1.2;
}