/* Theme Variables for Unaware Dating App */
/* Extends the existing :root variables in style.css */

/* Default LIGHT Theme - Dark theme users get overrides via JS immediately */
:root {
    --theme-bg: #f8f8f8;
    --theme-text: #000000;
    --theme-text-dim: #333333;
    --theme-text-bright: #000000;
    --theme-border: #cccccc;
    --theme-button-bg: #000000;
    --theme-button-border: #000000;
    --theme-button-text: #f8f8f8;
    --theme-button-hover-bg: #333333;
    --theme-button-hover-text: #f8f8f8;
    --theme-button-shadow: rgba(0, 0, 0, 0.3);
    --theme-button-glow: rgba(0, 0, 0, 0.5);
    
    /* Light theme: BACK button (outline style) */
    --theme-back-button-bg: #f8f8f8;
    --theme-back-button-border: #000000;
    --theme-back-button-text: #000000;
    --theme-back-button-hover-bg: #000000;
    --theme-back-button-hover-text: #f8f8f8;
    
    --theme-input-bg: rgba(0, 0, 0, 0.03);
    --theme-input-border: #333333;
    --theme-message-bg: rgba(0, 0, 0, 0.05);
    --theme-scan-line: rgba(150, 150, 150, 0.15);
    
    /* Light theme terminal variables */
    --terminal-bg: #f8f8f8;
    --terminal-text: #000000;
    --terminal-dim: #333333;
    --terminal-bright: #000000;
    --terminal-cyan: #1F75FE;
    --terminal-border: #cccccc;
}

/* Light Theme Variables */
html.theme-light,
body.theme-light {
    --theme-bg: #f8f8f8;
    --theme-text: #000000;
    --theme-text-dim: #333333;
    --theme-text-bright: #000000;
    --theme-border: #cccccc;
    --theme-button-bg: #000000;
    --theme-button-border: #000000;
    --theme-button-text: #f8f8f8;
    --theme-button-hover-bg: #333333;
    --theme-button-hover-text: #f8f8f8;
    --theme-button-shadow: rgba(0, 0, 0, 0.3);
    --theme-button-glow: rgba(0, 0, 0, 0.5);
    
    /* Light theme: BACK button (outline style) */
    --theme-back-button-bg: #f8f8f8;
    --theme-back-button-border: #000000;
    --theme-back-button-text: #000000;
    --theme-back-button-hover-bg: #000000;
    --theme-back-button-hover-text: #f8f8f8;
    --theme-input-bg: rgba(0, 0, 0, 0.03);
    --theme-input-border: #333333;
    --theme-message-bg: rgba(0, 0, 0, 0.05);
    --theme-scan-line: rgba(150, 150, 150, 0.15);
    
    /* Light theme specific overrides */
    --terminal-bg: #f8f8f8;
    --terminal-text: #000000;
    --terminal-dim: #333333;
    --terminal-bright: #000000;
    --terminal-cyan: #1F75FE;
    --terminal-border: #cccccc;
}

/* Dark Theme Explicit - Applied via JS for dark theme users */
html.theme-dark,
body.theme-dark {
    --theme-bg: #000000;
    --theme-text: #00ff00;
    --theme-text-dim: #008000;
    --theme-text-bright: #00ff41;
    --theme-border: #333333;
    --theme-button-bg: #000000;
    --theme-button-border: #00ff00;
    --theme-button-text: #00ff00;
    --theme-button-hover-bg: #00ff00;
    --theme-button-hover-text: #000000;
    --theme-button-shadow: rgba(0, 255, 0, 0.3);
    --theme-button-glow: rgba(0, 255, 0, 0.5);
    --theme-input-bg: rgba(0, 255, 0, 0.05);
    --theme-input-border: #008000;
    --theme-message-bg: rgba(0, 255, 0, 0.1);
    --theme-scan-line: rgba(0, 255, 0, 0.06);
    
    /* Dark theme: BACK button (outline style) */
    --theme-back-button-bg: #000000;
    --theme-back-button-border: #008000;
    --theme-back-button-text: #008000;
    --theme-back-button-hover-bg: #008000;
    --theme-back-button-hover-text: #000000;
    
    /* Dark theme terminal variables */
    --terminal-bg: #000000;
    --terminal-text: #00ff00;
    --terminal-dim: #008000;
    --terminal-bright: #00ff41;
    --terminal-cyan: #fac929;
    --terminal-border: #333333;
}

/* Universal theme-aware classes that pages can use */
.theme-background {
    background-color: var(--theme-bg);
    color: var(--theme-text);
}

.theme-button {
    background-color: var(--theme-button-bg);
    border: 2px solid var(--theme-button-border);
    color: var(--theme-button-text);
}

.theme-input {
    background-color: var(--theme-input-bg);
    border-bottom: 2px solid var(--theme-input-border);
    color: var(--theme-text);
}

.theme-border {
    border-color: var(--theme-border);
}

/* Scan lines effect for both themes */
.theme-scanlines {
    background-image: repeating-linear-gradient(
        0deg,
        var(--theme-scan-line) 0px,
        var(--theme-scan-line) 1px,
        transparent 1px,
        transparent 3px
    );
    background-size: 100% 4px;
}