/*
 =============================================================
  _____ _   _ _
 |_   _| |_(_) |___
  | | | ' \ | / -_)
  |_| |_||_|_\___|

 themes.css — Modular UI theme tokens (CSS custom properties)
 =============================================================
 Five themes: Light, Dark, Deep Ocean, Forest, Cyberpunk.
 The active theme is set via the data-theme attribute on <html>,
 toggled by the Alpine.js theme switcher in base.html.

 Additional utility classes:
   .btn-brand  — Primary action button
   .bg-card    — Card / panel background
   .bg-tab     — Tab bar background
   [x-cloak]   — Alpine.js cloak (hidden until Alpine inits)
 =============================================================
*/

/* ==================== LIGHT (default) ==================== */
:root, [data-theme="light"] {
    color-scheme: light;
    --bg-primary:       #f8fafc;
    --bg-secondary:     #ffffff;
    --text-main:        #0f172a;
    --brand-color:      #2563eb;
    --border-color:     #e2e8f0;
    --bg-tab:           #f1f5f9;
    --text-tab:         #334155;
    --border-tab:       #cbd5e1;
    --bg-input:         #f8fafc;
    --text-input:       #0f172a;
    --border-input:     #cbd5e1;
    --placeholder-input:#64748b;
    --focus-input:      #2563eb;
    --focus-ring:       rgba(37, 99, 235, 0.22);
}

/* ==================== DARK ==================== */
[data-theme="dark"] {
    color-scheme: dark;
    --bg-primary:       #0b0f19;
    --bg-secondary:     #151f32;
    --text-main:        #f8fafc;
    --brand-color:      #3b82f6;
    --border-color:     #1e293b;
    --bg-tab:           #1e293b;
    --text-tab:         #f8fafc;
    --border-tab:       #334155;
    --bg-input:         #0f172a;
    --text-input:       #f8fafc;
    --border-input:     #334155;
    --placeholder-input:#94a3b8;
    --focus-input:      #60a5fa;
    --focus-ring:       rgba(96, 165, 250, 0.25);
}

/* ==================== DEEP OCEAN ==================== */
[data-theme="blue"] {
    color-scheme: light;
    --bg-primary:       #ecf3fe;
    --bg-secondary:     #ffffff;
    --text-main:        #1e3a8a;
    --brand-color:      #1d4ed8;
    --border-color:     #bfdbfe;
    --bg-tab:           #dbeafe;
    --text-tab:         #1e3a8a;
    --border-tab:       #93c5fd;
    --bg-input:         #eff6ff;
    --text-input:       #1e3a8a;
    --border-input:     #93c5fd;
    --placeholder-input:#5271a7;
    --focus-input:      #1d4ed8;
    --focus-ring:       rgba(29, 78, 216, 0.22);
}

/* ==================== FOREST ==================== */
[data-theme="green"] {
    color-scheme: light;
    --bg-primary:       #f0fdf4;
    --bg-secondary:     #ffffff;
    --text-main:        #14532d;
    --brand-color:      #16a34a;
    --border-color:     #bbf7d0;
    --bg-tab:           #dcfce7;
    --text-tab:         #14532d;
    --border-tab:       #86efac;
    --bg-input:         #ecfdf3;
    --text-input:       #14532d;
    --border-input:     #86efac;
    --placeholder-input:#4d7c5f;
    --focus-input:      #16a34a;
    --focus-ring:       rgba(22, 163, 74, 0.22);
}

/* ==================== CYBERPUNK ==================== */
[data-theme="cyberpunk"] {
    color-scheme: dark;
    --bg-primary:       #0b001a;
    --bg-secondary:     #1a0033;
    --text-main:        #00ffcc;
    --brand-color:      #ff007f;
    --border-color:     #ff007f;
    --bg-tab:           #1a0033;
    --text-tab:         #00ffcc;
    --border-tab:       #ff007f;
    --bg-input:         #120022;
    --text-input:       #00ffcc;
    --border-input:     #9d174d;
    --placeholder-input:#7af2db;
    --focus-input:      #ff007f;
    --focus-ring:       rgba(255, 0, 127, 0.25);
}

/* ==================== SHARED UTILITIES ==================== */

/* Theme-aware text-like form controls. Specialized file and check controls
   keep their native/utility styling rather than using this class. */
.theme-input {
    background-color: var(--bg-input) !important;
    color: var(--text-input) !important;
    border-color: var(--border-input) !important;
}
.theme-input::placeholder {
    color: var(--placeholder-input);
    opacity: 1;
}
.theme-input:focus {
    border-color: var(--focus-input) !important;
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.theme-input:-webkit-autofill,
.theme-input:-webkit-autofill:hover,
.theme-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-input);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset;
    caret-color: var(--text-input);
}
.theme-input option {
    background-color: var(--bg-input);
    color: var(--text-input);
}

body {
    background-color: var(--bg-primary);
    color: var(--text-main);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-brand {
    background-color: var(--brand-color);
    color: white;
    transition: filter 0.15s ease;
}
.btn-brand:hover {
    filter: brightness(1.1);
}

.bg-card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.bg-tab {
    background-color: var(--bg-tab);
    color: var(--text-tab);
    border-color: var(--border-tab);
}

.btn-secondary {
    background-color: var(--bg-tab);
    color: var(--text-tab);
    border: 1px solid var(--border-tab);
}
.btn-secondary:hover {
    filter: brightness(1.15);
}

/* Alpine.js cloak — hidden until Alpine initialises */
[x-cloak] {
    display: none !important;
}