/* =========================================
   THEME DEFINITIONS & VISUAL LOGIC
   ========================================= */

/* --- 1. MINIMAL --- 
   Philosophy: Apple-esque, clean, soft shadows, lots of whitespace.
*/
[data-style="minimal"] .login-card {
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--panel-border);
}
[data-style="minimal"] .app-logo {
    box-shadow: none; /* Flatter logo for minimal */
    background: var(--brand-surface);
    color: var(--brand-color);
}
[data-style="minimal"] input:focus {
    box-shadow: 0 0 0 3px var(--input-focus-ring);
    border-color: var(--brand-color);
}

/* --- 2. GLASSMORPHISM --- 
   Philosophy: Frosted glass, border reflection, noise texture.
*/
[data-style="glass"] #app-bg {
    background-image: 
        radial-gradient(at 0% 0%, hsla(var(--hue), 80%, 60%, 0.4) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(var(--hue), 80%, 40%, 0.2) 0px, transparent 50%),
        radial-gradient(at 100% 100%, #111 0px, transparent 60%);
    background-color: var(--app-bg);
}
[data-style="glass"] .login-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(255,255,255,0.05);
}
[data-style="glass"] input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}
[data-style="glass"] input:focus {
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--brand-color);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}
/* Light Mode Adjustments for Glass */
[data-style="glass"][data-mode="light"] input {
    background: rgba(255, 255, 255, 0.4);
    color: var(--text-main);
    border-color: rgba(255,255,255,0.4);
}
[data-style="glass"][data-mode="light"] input:focus {
    background: rgba(255, 255, 255, 0.6);
}
[data-style="glass"] .card-header p,
[data-style="glass"] .field label,
[data-style="glass"] .actions {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
[data-style="glass"][data-mode="light"] .card-header p,
[data-style="glass"][data-mode="light"] .field label,
[data-style="glass"][data-mode="light"] .actions {
    color: var(--text-body);
    text-shadow: none;
}

/* --- 3. BRUTALISM --- 
   Philosophy: Raw, unpolished, structural, high contrast.
*/
[data-style="brutal"] { 
    --radius: 0px; 
    --font-ui: 'Outfit', sans-serif; 
}
[data-style="brutal"] #app-bg {
    background-image: radial-gradient(var(--text-mute) 1px, transparent 1px);
    background-size: 20px 20px;
}
[data-style="brutal"] .login-card {
    border: 3px solid var(--text-main);
    box-shadow: 8px 8px 0 var(--text-main);
    background: var(--panel-bg);
    transform: translate(-4px, -4px);
}
[data-style="brutal"] .app-logo { 
    border: 2px solid var(--text-main); 
    box-shadow: 4px 4px 0 var(--text-main); 
    border-radius: 0; 
    background: var(--brand-color);
}
[data-style="brutal"] input {
    border: 2px solid var(--text-main); 
    background: transparent; 
    font-weight: 700;
}
[data-style="brutal"] input:focus {
    box-shadow: 4px 4px 0 var(--brand-color); 
    border-color: var(--text-main); 
    transform: translate(-2px, -2px);
    background: var(--panel-bg);
}
[data-style="brutal"] .btn-main {
    border: 2px solid var(--text-main); 
    background: var(--brand-color); 
    color: white;
    box-shadow: 4px 4px 0 var(--text-main);
    border-radius: 0;
}
[data-style="brutal"] .btn-main:hover { 
    transform: translate(-2px, -2px); 
    box-shadow: 6px 6px 0 var(--text-main); 
}
[data-style="brutal"] .btn-main:active { 
    transform: translate(0, 0); 
    box-shadow: 0 0 0 var(--text-main); 
}

/* --- 4. SOFT (NEUMORPHISM) --- 
   Philosophy: Extruded plastics, soft highlights.
*/
[data-style="soft"] { --radius: 20px; }
[data-style="soft"] .login-card {
    background: var(--app-bg); /* Match bg for effect */
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 
        20px 20px 60px rgba(0,0,0,0.05), 
        -20px -20px 60px rgba(255,255,255,0.8);
}
[data-style="soft"][data-mode="dark"] .login-card {
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 
        15px 15px 30px rgba(0,0,0,0.4), 
        -10px -10px 30px rgba(255,255,255,0.05);
}
[data-style="soft"] input {
    border: none; background: var(--app-bg);
    box-shadow: 
        inset 4px 4px 8px rgba(0,0,0,0.06), 
        inset -4px -4px 8px rgba(255,255,255,0.9);
}
[data-style="soft"][data-mode="dark"] input {
    box-shadow: 
        inset 4px 4px 10px rgba(0,0,0,0.5), 
        inset -4px -4px 10px rgba(255,255,255,0.05);
}
[data-style="soft"] input:focus {
    /* Pop out effect */
    box-shadow: 
        6px 6px 12px rgba(0,0,0,0.08), 
        -6px -6px 12px rgba(255,255,255,1);
    transform: translateY(-1px);
}
[data-style="soft"][data-mode="dark"] input:focus {
    box-shadow: 
        6px 6px 15px rgba(0,0,0,0.5), 
        -4px -4px 15px rgba(255,255,255,0.05);
}
[data-style="soft"] .btn-main {
    box-shadow: 
        6px 6px 12px rgba(var(--hue), var(--sat), 40%, 0.3),
        -4px -4px 10px rgba(255,255,255,0.2);
}

/* --- 5. CYBER --- 
   Philosophy: Sci-fi, HUD, glow, grid, monospaced.
*/
[data-style="cyber"] { 
    --font-ui: 'JetBrains Mono', monospace; 
    --radius: 2px; 
}
[data-style="cyber"] #app-bg {
    background-image: 
        linear-gradient(rgba(var(--hue), 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--hue), 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}
[data-style="cyber"] .login-card {
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid var(--brand-color);
    box-shadow: 0 0 20px rgba(var(--hue), 100%, 50%, 0.15);
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - 20px), 
        calc(100% - 20px) 100%, 
        0 100%
    );
}
[data-style="cyber"] .login-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: var(--brand-color); 
    box-shadow: 0 0 10px var(--brand-color);
}
[data-style="cyber"][data-mode="light"] .login-card { 
    background: #fff; border-color: var(--text-main); 
}
[data-style="cyber"] input {
    background: rgba(0,0,0,0.3); 
    border: 1px solid var(--text-mute); 
    border-left: 4px solid var(--text-mute);
}
[data-style="cyber"] input:focus {
    border-color: var(--brand-color); 
    border-left-color: var(--brand-color);
    box-shadow: 0 0 15px var(--brand-color); 
    background: rgba(var(--hue), 255, 255, 0.05);
}
[data-style="cyber"] .btn-main {
    text-transform: uppercase; letter-spacing: 2px; 
    border: 1px solid var(--brand-color);
    background: rgba(var(--hue), 255, 255, 0.1); 
    color: var(--brand-color); 
    text-shadow: 0 0 5px var(--brand-color);
    border-radius: 0;
}
[data-style="cyber"] .btn-main:hover {
    background: var(--brand-color); 
    color: #000; 
    box-shadow: 0 0 20px var(--brand-color); 
    text-shadow: none;
}

/* --- 6. MATERIAL (Google) --- 
   Philosophy: Shadows for elevation, solid colors, filled inputs.
*/
[data-style="material"] { 
    --radius: 4px; 
    --font-ui: 'Roboto', 'Inter', sans-serif; 
}
[data-style="material"] .login-card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-top: 4px solid var(--brand-color);
}
[data-style="material"] .input-wrap {
    background: var(--slate-100);
    border-radius: 4px 4px 0 0;
    border-bottom: 2px solid var(--text-mute);
}
[data-style="material"] input {
    background: transparent; 
    border: none; 
    border-radius: 0;
    padding-left: 12px;
}
[data-style="material"] input:focus {
    background: rgba(var(--hue), var(--sat), 50%, 0.05); 
    box-shadow: none;
}
[data-style="material"] .input-wrap:focus-within {
    border-bottom-color: var(--brand-color);
}
[data-style="material"] .btn-main {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    text-transform: uppercase; letter-spacing: 1px; font-weight: 500;
}

/* --- 7. RETRO (Win95) --- 
   Philosophy: Bevels, gray backgrounds, serif fonts.
*/
[data-style="retro"] { 
    --radius: 0; 
    --font-ui: 'Verdana', sans-serif; 
}
[data-style="retro"] #app-bg { 
    background-color: #008080; background-image: none; 
}
[data-style="retro"] .login-card {
    background: #C0C0C0; 
    border-top: 2px solid #fff; border-left: 2px solid #fff;
    border-right: 2px solid #000; border-bottom: 2px solid #000;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
    color: #000;
}
[data-style="retro"] .card-header h1,
[data-style="retro"] .field label { color: #000; }
[data-style="retro"] input {
    background: #fff; 
    border-top: 2px solid #000; border-left: 2px solid #000;
    border-right: 2px solid #dfdfdf; border-bottom: 2px solid #dfdfdf;
    color: #000;
}
[data-style="retro"] .btn-main {
    background: #C0C0C0; color: #000;
    border-top: 2px solid #fff; border-left: 2px solid #fff;
    border-right: 2px solid #000; border-bottom: 2px solid #000;
    box-shadow: none;
    font-weight: bold;
}
[data-style="retro"] .btn-main:active {
    border-top: 2px solid #000; border-left: 2px solid #000;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    padding-top: 15px; /* Visual press */
}
[data-style="retro"] .app-logo { 
    border: 2px solid #808080; border-radius: 0; box-shadow: none; 
    background: #fff; color: #000;
}

/* --- 8. TERMINAL --- 
   Philosophy: Monospace, high contrast, green/black, dashed lines.
*/
[data-style="terminal"] { 
    --radius: 0; 
    --font-ui: 'Courier New', monospace; 
}
[data-style="terminal"] #app-bg { background: #000; }
[data-style="terminal"] .login-card {
    background: #000; 
    border: 2px solid var(--c-success); 
    color: var(--c-success);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}
[data-style="terminal"] .card-header p, 
[data-style="terminal"] label, 
[data-style="terminal"] .actions,
[data-style="terminal"] h1 { 
    color: var(--c-success); 
}
[data-style="terminal"] input {
    background: #000; 
    border: 1px dashed var(--c-success); 
    color: var(--c-success);
}
[data-style="terminal"] input:focus {
    border-style: solid; 
    box-shadow: none;
    outline: none;
}
[data-style="terminal"] .btn-main {
    background: var(--c-success); 
    color: #000; 
    border: 2px solid var(--c-success);
    font-weight: 700; text-transform: lowercase;
}
[data-style="terminal"] .btn-main:hover {
    background: #000; color: var(--c-success);
}
[data-style="terminal"] .app-logo {
    background: transparent; border: 1px solid var(--c-success); color: var(--c-success);
}

/* --- 9. PAPER (Stacked) --- 
   Philosophy: Physical layers, simple borders, off-white.
*/
[data-style="paper"] { --radius: 2px; }
[data-style="paper"] .login-card {
    background: #fff; 
    border: 2px solid var(--text-main);
    box-shadow: 6px 6px 0 rgba(0,0,0,0.05), 12px 12px 0 rgba(0,0,0,0.02);
}
[data-style="paper"][data-mode="dark"] .login-card { 
    background: var(--panel-bg); 
    border-color: var(--text-body); 
}
[data-style="paper"] input {
    border: 2px solid var(--text-mute); background: transparent;
}
[data-style="paper"] input:focus {
    border-color: var(--text-main); 
    box-shadow: none; 
    border-bottom-width: 4px;
}
[data-style="paper"] .btn-main {
    background: var(--text-main); 
    color: var(--panel-bg); 
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

/* --- 10. CLAY (Claymorphism) --- 
   Philosophy: Fluffy, inflated, matte 3D, heavy inner shadows.
*/
[data-style="clay"] { 
    --radius: 32px; 
    --font-ui: 'Outfit', sans-serif; 
}
[data-style="clay"] .login-card {
    background: var(--panel-bg); 
    border: none;
    box-shadow: 
        16px 16px 32px rgba(var(--hue), var(--sat), 30%, 0.15), 
        inset -8px -8px 16px rgba(var(--hue), var(--sat), 30%, 0.05),
        inset 8px 8px 16px rgba(255,255,255,0.5);
}
[data-style="clay"] input {
    border: none; 
    background: var(--input-bg); 
    border-radius: 16px;
    box-shadow: inset 4px 4px 8px rgba(0,0,0,0.05);
}
[data-style="clay"] .btn-main {
    border-radius: 24px;
    box-shadow: 
        8px 8px 16px rgba(var(--hue), var(--sat), 40%, 0.3),
        inset 2px 2px 4px rgba(255,255,255,0.4),
        inset -2px -2px 4px rgba(0,0,0,0.1);
}

/* --- 11. SKELETON (Blueprint) --- 
   Philosophy: Wireframe, transparent, dashed lines, technical.
*/
[data-style="skeleton"] { 
    --radius: 4px; 
    --font-ui: 'Courier New', monospace; 
}
[data-style="skeleton"] #app-bg {
    background-color: #0d1b2a;
    background-image: 
        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 50px 50px;
}
[data-style="skeleton"] .login-card {
    background: transparent;
    border: 2px dashed rgba(255,255,255,0.3);
    box-shadow: none;
}
[data-style="skeleton"] .app-logo { 
    background: transparent; 
    border: 1px solid var(--brand-color); 
    color: var(--brand-color); 
}
[data-style="skeleton"] input {
    background: transparent; 
    border: 1px solid rgba(255,255,255,0.2); 
    color: #fff;
}
[data-style="skeleton"] input:focus { 
    border-color: var(--brand-color); 
    box-shadow: 0 0 10px var(--brand-color);
}
[data-style="skeleton"] .btn-main {
    background: transparent; 
    border: 1px solid var(--brand-color); 
    color: var(--brand-color);
}
[data-style="skeleton"] .btn-main:hover {
    background: rgba(var(--hue), var(--sat), 50%, 0.1);
}