/* ============================================
   THEME VARIABLES
   Centralized CSS Custom Properties for all themes
   Phase 3 & 4 of THEMING_INITIATIVE.md
   
   This file contains ALL theme color definitions.
   Import this file before public-pages.css
   
   Auto dark mode: When user's OS prefers dark mode,
   Space theme is applied automatically (Phase 4)
   ============================================ */

/* ============================================
   📐 GLOBAL LAYOUT VARIABLES
   Shared dimensions used across all themes
   ============================================ */
:root {
    --header-height: 56px;
    --drawer-width: 280px;
    --footer-height: 60px;
    --transition-duration: 0.3s;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   💼 ROOT DEFAULTS — Executive Theme
   :root uses Executive values so the page never
   flashes a different theme before Blazor loads.
   ============================================ */
:root {
    /* Page Background - neutral gray gradient (matches Executive theme) */
    --theme-page-bg: linear-gradient(180deg, #f5f5f5 0%, #efefef 35%, #e8e8e8 65%, #e0e0e0 100%);

    /* Text Colors */
    --theme-text-primary: #0f172a;
    --theme-text-secondary: #475569;
    --theme-text-muted: #94a3b8;
    --theme-text-hint: #64748b;
    --theme-text-danger: #dc2626;
    --theme-text-success: #15803d;
    --theme-text-warning: #b45309;
    --theme-text-info: #0369a1;

    /* Header & Action Backgrounds */
    --theme-header-bg: #0f172a;
    --theme-bg-danger: rgba(220, 38, 38, 0.08);
    --theme-bg-success: rgba(22, 163, 74, 0.08);
    --theme-bg-warning: rgba(217, 119, 6, 0.08);
    --theme-bg-info: rgba(14, 165, 233, 0.08);

    /* Sign-in Button */
    --theme-signin-color: #0f172a;
    --theme-signin-hover-bg: rgba(15, 23, 42, 0.08);

    /* Chips/Tags */
    --theme-chip-bg: rgba(71, 85, 105, 0.08);
    --theme-chip-color: #475569;
    --theme-chip-hover-bg: rgba(71, 85, 105, 0.15);
    --theme-chip-border: rgba(71, 85, 105, 0.25);

    /* Links */
    --theme-link-color: #64748b;
    --theme-link-hover-color: #334155;
    --theme-link-hover-bg: rgba(71, 85, 105, 0.08);

    /* Footer */
    --theme-footer-color: #94a3b8;
    --theme-footer-hover-color: #475569;

    /* Surfaces & Borders */
    --theme-surface: #ffffff;
    --theme-surface-secondary: #f8fafc;
    --theme-border: #e2e8f0;

    /* Inputs */
    --theme-input-bg: #ffffff;
    --theme-input-border: #cbd5e1;
    --theme-input-text: #0f172a;
    --theme-input-focus: #475569;

    /* Buttons - slate, professional, understated */
    --theme-primary: #334155;
    --theme-primary-hover: #1e293b;
    --theme-btn-text: #ffffff;
    --theme-secondary: #f1f5f9;
    --theme-secondary-hover: #e2e8f0;
    --theme-secondary-text: #475569;
    --theme-accent: #475569;

    /* RGB Triplets (for alpha transparency) */
    --theme-primary-rgb: 51, 65, 85;
    --theme-accent-rgb: 71, 85, 105;

    /* Gradients (Flat - no playful gradients) */
    --theme-gradient-text: #334155;
    --theme-cta-gradient: #334155;

    /* Shadows - very subtle, no color tinting */
    --theme-shadow-color: rgba(15, 23, 42, 0.08);
    --theme-title-shadow: none;
    --theme-subtitle-shadow: none;
}

/* ============================================
   ☁️ CLOUD THEME (Light)
   Professional, clean, airy feel
   ============================================ */
.theme-cloud {
    /* Page Background */
    --theme-page-bg: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);

    /* Text Colors */
    --theme-text-primary: #1e3a5f;
    --theme-text-secondary: #475569;
    --theme-text-muted: #94a3b8;
    --theme-text-hint: #64748b;
    --theme-text-danger: #dc2626;
    --theme-text-success: #15803d; /* Dark green for light mode */
    --theme-text-warning: #b45309; /* Dark amber */
    --theme-text-info: #0369a1; /* Dark sky */

    /* Header & Action Backgrounds */
    --theme-header-bg: #1e3a5f;
    --theme-bg-danger: rgba(220, 38, 38, 0.1);
    --theme-bg-success: rgba(22, 163, 74, 0.1);
    --theme-bg-warning: rgba(217, 119, 6, 0.1);
    --theme-bg-info: rgba(14, 165, 233, 0.1);

    /* Sign-in Button */
    --theme-signin-color: #1e3a5f;
    --theme-signin-hover-bg: rgba(30, 58, 95, 0.1);

    /* Chips/Tags */
    --theme-chip-bg: rgba(124, 58, 237, 0.08);
    --theme-chip-color: #7c3aed;
    --theme-chip-hover-bg: rgba(124, 58, 237, 0.15);
    --theme-chip-border: rgba(124, 58, 237, 0.3);

    /* Links */
    --theme-link-color: #94a3b8;
    --theme-link-hover-color: #64748b;
    --theme-link-hover-bg: rgba(148, 163, 184, 0.1);

    /* Footer */
    --theme-footer-color: #ffffff;
    --theme-footer-hover-color: #e2e8f0;

    /* Surfaces & Borders */
    --theme-surface: #ffffff;
    --theme-surface-secondary: #f8fafc;
    --theme-border: #e2e8f0;

    /* Inputs */
    --theme-input-bg: #ffffff;
    --theme-input-border: #cbd5e1;
    --theme-input-text: #1e293b;
    --theme-input-focus: #3b82f6;

    /* Buttons */
    --theme-primary: #3b82f6;
    --theme-primary-hover: #2563eb;
    --theme-btn-text: #ffffff;
    --theme-secondary: #f1f5f9;
    --theme-secondary-hover: #e2e8f0;
    --theme-secondary-text: #64748b;
    --theme-accent: #6366f1;

    /* RGB Triplets (for alpha transparency) */
    --theme-primary-rgb: 59, 130, 246;
    --theme-accent-rgb: 99, 102, 241;

    /* Gradients (Flattened for standardizing boxes/sections) */
    --theme-gradient-text: #3b82f6; 
    --theme-cta-gradient: #3b82f6;

    /* Shadows */
    --theme-shadow-color: rgba(59, 130, 246, 0.5);
    --theme-title-shadow: 0 2px 20px rgba(255, 255, 255, 0.5);
    --theme-subtitle-shadow: 0 1px 10px rgba(255, 255, 255, 0.8);
}

/* ============================================
   🚀 SPACE THEME (Dark)
   Cosmic, immersive, night mode
   ============================================ */
.theme-space {
/* Page Background */
--theme-page-bg: linear-gradient(180deg, #0f0a1e 0%, #1a1040 30%, #2d1b69 70%, #1e1b4b 100%);

/* Text Colors */
--theme-text-primary: #f1f5f9;
--theme-text-danger: #f87171;
--theme-text-success: #4ade80;
--theme-text-warning: #fbbf24;
--theme-text-info: #38bdf8;
--theme-text-secondary: #94a3b8;
--theme-text-muted: #64748b;
--theme-text-hint: #94a3b8;

/* Header & Action Backgrounds */
--theme-header-bg: #0f0a1e;
--theme-bg-danger: rgba(239, 68, 68, 0.15);
--theme-bg-success: rgba(34, 197, 94, 0.15);
--theme-bg-warning: rgba(245, 158, 11, 0.15);
--theme-bg-info: rgba(56, 189, 248, 0.15);

/* Surfaces & Borders */
--theme-surface: #1e293b;
--theme-surface-secondary: #0f172a;
--theme-border: #334155;
    
/* Inputs */
--theme-input-bg: rgba(15, 23, 42, 0.7);
--theme-input-border: #475569;
--theme-input-text: #f1f5f9;
--theme-input-focus: #a855f7;

/* Buttons */
--theme-primary: #a855f7;
--theme-primary-hover: #9333ea;
--theme-btn-text: #ffffff;
--theme-secondary: #334155;
--theme-secondary-hover: #475569;
--theme-secondary-text: #f1f5f9;
--theme-accent: #a855f7;

    /* RGB Triplets (for alpha transparency) */
    --theme-primary-rgb: 168, 85, 247;
    --theme-accent-rgb: 168, 85, 247;

/* Sign-in Button */
    --theme-signin-color: #ffffff;
    --theme-signin-hover-bg: rgba(255, 255, 255, 0.1);
    
    /* Chips/Tags */
    --theme-chip-bg: rgba(168, 85, 247, 0.2);
    --theme-chip-color: #c4b5fd;
    --theme-chip-hover-bg: rgba(168, 85, 247, 0.3);
    --theme-chip-border: rgba(168, 85, 247, 0.4);
    
    /* Links */
    --theme-link-color: #64748b;
    --theme-link-hover-color: #94a3b8;
    --theme-link-hover-bg: rgba(255, 255, 255, 0.05);
    
    /* Footer */
    --theme-footer-color: rgba(255, 255, 255, 0.5);
    --theme-footer-hover-color: rgba(255, 255, 255, 0.8);
    
    /* Gradients */
    --theme-gradient-text: #a855f7;
    --theme-cta-gradient: #a855f7;
    
    /* Shadows */
    --theme-shadow-color: rgba(168, 85, 247, 0.5);
    --theme-title-shadow: 0 0 40px rgba(168, 85, 247, 0.5);
    --theme-subtitle-shadow: 0 0 20px rgba(148, 163, 184, 0.3);
}

/* ============================================
   ❄️ WINTER THEME (Dark)
   Cool, calm, serene
   ============================================ */
.theme-winter {
    /* Page Background */
    --theme-page-bg: linear-gradient(180deg, #164e63 0%, #155e75 30%, #0e7490 70%, #0891b2 100%);

    /* Text Colors */
    --theme-text-primary: #f0f9ff;
    --theme-text-secondary: #bae6fd;
    --theme-text-muted: #7dd3fc;
    --theme-text-hint: #bae6fd;
    --theme-text-danger: #f87171;
    --theme-text-success: #4ade80;
    --theme-text-warning: #fbbf24;
    --theme-text-info: #38bdf8;

    /* Header & Action Backgrounds */
    --theme-header-bg: #164e63;
    --theme-bg-danger: rgba(239, 68, 68, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(245, 158, 11, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(245, 158, 11, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);

/* Surfaces & Borders */
--theme-surface: #1e293b;
--theme-surface-secondary: #0f172a;
--theme-border: #334155;
    
/* Inputs */
--theme-input-bg: rgba(15, 23, 42, 0.7);
--theme-input-border: #475569;
--theme-input-text: #f0f9ff;
--theme-input-focus: #38bdf8;

    /* Buttons */
    --theme-primary: #0ea5e9;
    --theme-primary-hover: #0284c7;
    --theme-btn-text: #ffffff;
    --theme-secondary: #334155;
    --theme-secondary-hover: #475569;
    --theme-secondary-text: #e0f2fe;
    --theme-accent: #38bdf8;

    /* RGB Triplets (for alpha transparency) */
    --theme-primary-rgb: 14, 165, 233;
    --theme-accent-rgb: 56, 189, 248;

    /* Sign-in Button */
    --theme-signin-color: #ffffff;
    --theme-signin-hover-bg: rgba(255, 255, 255, 0.1);

    /* Chips/Tags */
    --theme-chip-bg: rgba(186, 230, 253, 0.15);
    --theme-chip-color: #e0f2fe;
    --theme-chip-hover-bg: rgba(186, 230, 253, 0.25);
    --theme-chip-border: rgba(186, 230, 253, 0.3);
    
    /* Links */
    --theme-link-color: #7dd3fc;
    --theme-link-hover-color: #bae6fd;
    --theme-link-hover-bg: rgba(255, 255, 255, 0.05);
    
    /* Footer */
    --theme-footer-color: rgba(255, 255, 255, 0.5);
    --theme-footer-hover-color: rgba(255, 255, 255, 0.8);
    
    /* Gradients (Flattened) */
    --theme-gradient-text: #06b6d4;
    --theme-cta-gradient: #0891b2;
    
    /* Shadows */
    --theme-shadow-color: rgba(14, 165, 233, 0.5);
    --theme-title-shadow: 0 2px 20px rgba(186, 230, 253, 0.4);
    --theme-subtitle-shadow: 0 1px 10px rgba(186, 230, 253, 0.3);
}

/* ============================================
   🌿 NATURE THEME (Dark)
   Organic, earthy, forest vibes
   ============================================ */
.theme-nature {
    /* Page Background */
    --theme-page-bg: linear-gradient(180deg, #14532d 0%, #166534 30%, #15803d 70%, #22c55e 100%);

    /* Text Colors */
    --theme-text-primary: #f0fdf4;
    --theme-text-secondary: #bbf7d0;
    --theme-text-muted: #86efac;
    --theme-text-hint: #bbf7d0;
    --theme-text-danger: #f87171;
    --theme-text-success: #4ade80;
    --theme-text-warning: #fbbf24;
    --theme-text-info: #38bdf8;

    /* Header & Action Backgrounds */
    --theme-header-bg: #14532d;
    --theme-bg-danger: rgba(239, 68, 68, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(245, 158, 11, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(245, 158, 11, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);

/* Surfaces & Borders */
--theme-surface: #14532d;
--theme-surface-secondary: #0f172a;
--theme-border: #166534;
    
/* Inputs */
--theme-input-bg: rgba(5, 46, 22, 0.7);
--theme-input-border: #22c55e;
--theme-input-text: #f0fdf4;
--theme-input-focus: #4ade80;

    /* Buttons */
    --theme-primary: #22c55e;
    --theme-primary-hover: #16a34a;
    --theme-btn-text: #052e16;
    --theme-secondary: #166534;
    --theme-secondary-hover: #14532d;
    --theme-secondary-text: #f0fdf4;
    --theme-accent: #4ade80;

    /* RGB Triplets (for alpha transparency) */
    --theme-primary-rgb: 34, 197, 94;
    --theme-accent-rgb: 74, 222, 128;

    /* Sign-in Button */
    --theme-signin-color: #ffffff;
    --theme-signin-hover-bg: rgba(255, 255, 255, 0.1);

    /* Chips/Tags */
    --theme-chip-bg: rgba(134, 239, 172, 0.15);
    --theme-chip-color: #dcfce7;
    --theme-chip-hover-bg: rgba(134, 239, 172, 0.25);
    --theme-chip-border: rgba(134, 239, 172, 0.3);
    
    /* Links */
    --theme-link-color: #86efac;
    --theme-link-hover-color: #bbf7d0;
    --theme-link-hover-bg: rgba(255, 255, 255, 0.05);
    
    /* Footer */
    --theme-footer-color: rgba(255, 255, 255, 0.5);
    --theme-footer-hover-color: rgba(255, 255, 255, 0.8);
    
    /* Gradients (Flattened) */
    --theme-gradient-text: #4ade80;
    --theme-cta-gradient: #16a34a;
    
    /* Shadows */
    --theme-shadow-color: rgba(34, 197, 94, 0.5);
    --theme-title-shadow: 0 2px 20px rgba(5, 46, 22, 0.4);
    --theme-subtitle-shadow: 0 1px 10px rgba(5, 46, 22, 0.3);
}

/* ============================================
   🌊 OCEAN THEME (Dark)
   Refreshing, fluid, sunset vibes
   ============================================ */
.theme-ocean {
    /* Page Background */
    --theme-page-bg: linear-gradient(180deg, #0c4a6e 0%, #075985 30%, #0284c7 70%, #0ea5e9 100%);

    /* Text Colors */
    --theme-text-primary: #f0f9ff;
    --theme-text-secondary: #e0f2fe;
    --theme-text-muted: #7dd3fc;
    --theme-text-hint: #bae6fd;
    --theme-text-danger: #f87171;
    --theme-text-success: #4ade80;
    --theme-text-warning: #fbbf24;
    --theme-text-info: #38bdf8;

    /* Header & Action Backgrounds */
    --theme-header-bg: #0c4a6e;
    --theme-bg-danger: rgba(239, 68, 68, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(245, 158, 11, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(245, 158, 11, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);

/* Surfaces & Borders */
--theme-surface: #0c4a6e;
--theme-surface-secondary: #082f49;
--theme-border: #0284c7;
    
/* Inputs */
--theme-input-bg: rgba(8, 47, 73, 0.7);
--theme-input-border: #0ea5e9;
--theme-input-text: #f0f9ff;
--theme-input-focus: #38bdf8;

    /* Buttons */
    --theme-primary: #0ea5e9;
    --theme-primary-hover: #0284c7;
    --theme-btn-text: #ffffff;
    --theme-secondary: #075985;
    --theme-secondary-hover: #0c4a6e;
    --theme-secondary-text: #e0f2fe;
    --theme-accent: #22d3d1;

    /* RGB Triplets (for alpha transparency) */
    --theme-primary-rgb: 14, 165, 233;
    --theme-accent-rgb: 34, 211, 209;

    /* Sign-in Button */
    --theme-signin-color: #ffffff;
    --theme-signin-hover-bg: rgba(255, 255, 255, 0.1);

    /* Chips/Tags */
    --theme-chip-bg: rgba(125, 211, 252, 0.15);
    --theme-chip-color: #e0f2fe;
    --theme-chip-hover-bg: rgba(125, 211, 252, 0.25);
    --theme-chip-border: rgba(125, 211, 252, 0.3);
    
    /* Links */
    --theme-link-color: #7dd3fc;
    --theme-link-hover-color: #bae6fd;
    --theme-link-hover-bg: rgba(255, 255, 255, 0.05);
    
    /* Footer */
    --theme-footer-color: rgba(255, 255, 255, 0.5);
    --theme-footer-hover-color: rgba(255, 255, 255, 0.8);
    
    /* Gradients (Flattened) */
    --theme-gradient-text: #0ea5e9;
    --theme-cta-gradient: #0284c7;
    
    /* Shadows */
    --theme-shadow-color: rgba(2, 132, 199, 0.5);
    --theme-title-shadow: 0 2px 20px rgba(7, 89, 133, 0.5);
        --theme-subtitle-shadow: 0 1px 10px rgba(7, 89, 133, 0.4);
    }

/* ============================================
   💼 EXECUTIVE THEME (Light)
   Clean, corporate, distraction-free
   Designed for professional / shared environments
   ============================================ */
.theme-executive {
    /* Page Background - neutral gray gradient, no blue tint */
    --theme-page-bg: linear-gradient(180deg, #f5f5f5 0%, #efefef 35%, #e8e8e8 65%, #e0e0e0 100%);

    /* Text Colors */
    --theme-text-primary: #0f172a;
    --theme-text-secondary: #475569;
    --theme-text-muted: #94a3b8;
    --theme-text-hint: #64748b;
    --theme-text-danger: #dc2626;
    --theme-text-success: #15803d;
    --theme-text-warning: #b45309;
    --theme-text-info: #0369a1;

    /* Header & Action Backgrounds */
    --theme-header-bg: #0f172a;
    --theme-bg-danger: rgba(220, 38, 38, 0.08);
    --theme-bg-success: rgba(22, 163, 74, 0.08);
    --theme-bg-warning: rgba(217, 119, 6, 0.08);
    --theme-bg-info: rgba(14, 165, 233, 0.08);

    /* Sign-in Button */
    --theme-signin-color: #0f172a;
    --theme-signin-hover-bg: rgba(15, 23, 42, 0.08);

    /* Chips/Tags */
    --theme-chip-bg: rgba(71, 85, 105, 0.08);
    --theme-chip-color: #475569;
    --theme-chip-hover-bg: rgba(71, 85, 105, 0.15);
    --theme-chip-border: rgba(71, 85, 105, 0.25);

    /* Links */
    --theme-link-color: #64748b;
    --theme-link-hover-color: #334155;
    --theme-link-hover-bg: rgba(71, 85, 105, 0.08);

    /* Footer */
    --theme-footer-color: #94a3b8;
    --theme-footer-hover-color: #475569;

    /* Surfaces & Borders */
    --theme-surface: #ffffff;
    --theme-surface-secondary: #f8fafc;
    --theme-border: #e2e8f0;

    /* Inputs */
    --theme-input-bg: #ffffff;
    --theme-input-border: #cbd5e1;
    --theme-input-text: #0f172a;
    --theme-input-focus: #475569;

    /* Buttons - slate, professional, understated */
    --theme-primary: #334155;
    --theme-primary-hover: #1e293b;
    --theme-btn-text: #ffffff;
    --theme-secondary: #f1f5f9;
    --theme-secondary-hover: #e2e8f0;
    --theme-secondary-text: #475569;
    --theme-accent: #475569;

    /* RGB Triplets (for alpha transparency) */
    --theme-primary-rgb: 51, 65, 85;
    --theme-accent-rgb: 71, 85, 105;

    /* Gradients (Flat - no playful gradients) */
    --theme-gradient-text: #334155;
    --theme-cta-gradient: #334155;

    /* Shadows - very subtle, no color tinting */
    --theme-shadow-color: rgba(15, 23, 42, 0.08);
    --theme-title-shadow: none;
    --theme-subtitle-shadow: none;
}

/* ============================================
   🌑 EXECUTIVE DARK THEME (Dark)  — PRO-DARK-1 (2026-07-21)
   The dark half of the Executive pair: clean, business, restrained.
   Deliberately NOT gamey — no neon, no animation, no playful gradients.
   Slate/near-black surfaces, light slate text, single slate accent.
   Contrast targets WCAG AA (accessibility is the whole point of this theme).
   ============================================ */
.theme-executivedark {
    /* Page Background - deep slate, barely-there vertical gradient */
    --theme-page-bg: linear-gradient(180deg, #0f172a 0%, #131c2e 35%, #172033 65%, #1a2438 100%);

    /* Text Colors - light on dark; status colors brightened so they read on the page */
    --theme-text-primary: #f1f5f9;
    --theme-text-secondary: #cbd5e1;
    --theme-text-muted: #94a3b8;
    --theme-text-hint: #94a3b8;
    --theme-text-danger: #f87171;
    --theme-text-success: #4ade80;
    --theme-text-warning: #fbbf24;
    --theme-text-info: #38bdf8;

    /* Header & Action Backgrounds - header is an ELEVATED bar above the page */
    --theme-header-bg: #1e293b;
    --theme-bg-danger: rgba(248, 113, 113, 0.12);
    --theme-bg-success: rgba(74, 222, 128, 0.12);
    --theme-bg-warning: rgba(251, 191, 36, 0.12);
    --theme-bg-info: rgba(56, 189, 248, 0.12);

    /* Sign-in Button */
    --theme-signin-color: #f1f5f9;
    --theme-signin-hover-bg: rgba(255, 255, 255, 0.08);

    /* Chips/Tags */
    --theme-chip-bg: rgba(148, 163, 184, 0.12);
    --theme-chip-color: #cbd5e1;
    --theme-chip-hover-bg: rgba(148, 163, 184, 0.20);
    --theme-chip-border: rgba(148, 163, 184, 0.25);

    /* Links */
    --theme-link-color: #94a3b8;
    --theme-link-hover-color: #e2e8f0;
    --theme-link-hover-bg: rgba(148, 163, 184, 0.10);

    /* Footer */
    --theme-footer-color: #64748b;
    --theme-footer-hover-color: #cbd5e1;

    /* Surfaces & Borders - cards sit ELEVATED above the page */
    --theme-surface: #1e293b;
    --theme-surface-secondary: #172033;
    --theme-border: #334155;

    /* Inputs */
    --theme-input-bg: #1e293b;
    --theme-input-border: #475569;
    --theme-input-text: #f1f5f9;
    --theme-input-focus: #64748b;

    /* Buttons - slate, professional, understated */
    --theme-primary: #475569;
    /* INK-1 (2026-10-02): --theme-primary is a FILL here (#475569 = button/selected backgrounds),
       but ~465 component rules use it as TEXT colour - 1.9-2.1:1 on Slate surfaces (selected chat
       tab, event times, + Log, Open Finance...). Those rules now read
       var(--theme-primary-ink, var(--theme-primary...)); only Slate defines the ink, so every
       other theme is unchanged. Rules that paint primary text on a LIGHT fill were left alone. */
    --theme-primary-ink: #e2e8f0;
    --theme-primary-hover: #64748b;
    --theme-btn-text: #ffffff;
    --theme-secondary: #1e293b;
    --theme-secondary-hover: #334155;
    --theme-secondary-text: #cbd5e1;
    --theme-accent: #64748b;

    /* RGB Triplets (for alpha transparency) */
    --theme-primary-rgb: 71, 85, 105;
    --theme-accent-rgb: 100, 116, 139;

    /* Gradients (Flat - no playful gradients) */
    --theme-gradient-text: #cbd5e1;
    --theme-cta-gradient: #475569;

    /* Shadows - deeper on a dark surface, still no color tinting */
    --theme-shadow-color: rgba(0, 0, 0, 0.40);
    --theme-title-shadow: none;
    --theme-subtitle-shadow: none;
}

/* ============================================
   🔮 MYSTIC THEME (Dark)
   Arcane, magical, mystical energy
   Inspired by sorcery and ancient arts
   ============================================ */
.theme-mystic {
    /* Page Background - Deep mystical purple with hints of orange energy */
    --theme-page-bg: linear-gradient(180deg, #1a0a2e 0%, #16082a 20%, #2d1b4e 50%, #1a0a2e 80%, #0d0515 100%);

    /* Text Colors */
    --theme-text-primary: #faf5ff;
    --theme-text-secondary: #e9d5ff;
    --theme-text-muted: #c4b5fd;
    --theme-text-hint: #a78bfa;
    --theme-text-danger: #f87171;
    --theme-text-success: #4ade80;
    --theme-text-warning: #fb923c;
    --theme-text-info: #38bdf8;

    /* Header & Action Backgrounds */
    --theme-header-bg: #1a0a2e;
    --theme-bg-danger: rgba(239, 68, 68, 0.15);
    --theme-bg-success: rgba(34, 197, 94, 0.15);
    --theme-bg-warning: rgba(251, 146, 60, 0.15);
    --theme-bg-info: rgba(56, 189, 248, 0.15);

    /* Surfaces & Borders */
    --theme-surface: #2d1b4e;
    --theme-surface-secondary: #1a0a2e;
    --theme-border: #7c3aed;

    /* Inputs */
    --theme-input-bg: rgba(26, 10, 46, 0.7);
    --theme-input-border: #a78bfa;
    --theme-input-text: #faf5ff;
    --theme-input-focus: #f97316;

    /* Buttons - Orange/gold magical energy */
    --theme-primary: #f97316;
    --theme-primary-hover: #ea580c;
    --theme-btn-text: #1a0a2e;
    --theme-secondary: #7c3aed;
    --theme-secondary-hover: #6d28d9;
    --theme-secondary-text: #faf5ff;
    --theme-accent: #f97316;

    /* RGB Triplets (for alpha transparency) */
    --theme-primary-rgb: 249, 115, 22;
    --theme-accent-rgb: 249, 115, 22;

    /* Sign-in Button */
    --theme-signin-color: #faf5ff;
    --theme-signin-hover-bg: rgba(249, 115, 22, 0.2);

    /* Chips/Tags */
    --theme-chip-bg: rgba(249, 115, 22, 0.15);
    --theme-chip-color: #fdba74;
    --theme-chip-hover-bg: rgba(249, 115, 22, 0.25);
    --theme-chip-border: rgba(249, 115, 22, 0.4);

    /* Links */
    --theme-link-color: #c4b5fd;
    --theme-link-hover-color: #f97316;
    --theme-link-hover-bg: rgba(249, 115, 22, 0.1);

    /* Footer */
    --theme-footer-color: rgba(196, 181, 253, 0.6);
    --theme-footer-hover-color: #f97316;

    /* Gradients */
    --theme-gradient-text: linear-gradient(135deg, #f97316 0%, #fbbf24 50%, #f97316 100%);

    /* HALO-1h (2026-08-21): the halo mark's ink chain reads --theme-gradient-text.
       On this theme that variable holds a GRADIENT, which is invalid for `color` -
       the declaration then dies at computed-value time and the mark falls back to
       INHERITING its host's colour (dark slate), which is why the ring read dull
       here while every solid-colour theme looked right. A theme whose gradient-text
       is an actual gradient must name its own halo ink. */
    --nts-halo-ink: #fbbf24;
    --theme-cta-gradient: linear-gradient(135deg, #f97316 0%, #ea580c 100%);

    /* Shadows - Mystical glow */
    --theme-shadow-color: rgba(249, 115, 22, 0.5);
    --theme-title-shadow: 0 0 40px rgba(249, 115, 22, 0.4), 0 0 80px rgba(124, 58, 237, 0.3);
    --theme-subtitle-shadow: 0 0 20px rgba(196, 181, 253, 0.3);
}

/* ============================================
   💠 TRON THEME (Dark)
   Futuristic, neon, digital grid
   Inspired by the Tron universe
   ============================================ */
.theme-tron {
    /* Page Background - Deep black with cyan grid overlay */
    --theme-page-bg: 
        /* Grid lines */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 49px,
            rgba(0, 212, 255, 0.03) 49px,
            rgba(0, 212, 255, 0.03) 50px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 49px,
            rgba(0, 212, 255, 0.03) 49px,
            rgba(0, 212, 255, 0.03) 50px
        ),
        /* Base gradient */
        linear-gradient(180deg, #000000 0%, #020408 20%, #040810 50%, #020408 80%, #000000 100%);

    /* Text Colors */
    --theme-text-primary: #e0f7ff;
    --theme-text-secondary: #7dd3fc;
    --theme-text-muted: #38bdf8;
    --theme-text-hint: #0ea5e9;
    --theme-text-danger: #ff4757;
    --theme-text-success: #00ff88;
    --theme-text-warning: #ffbe0b;
    --theme-text-info: #00d4ff;

    /* Header & Action Backgrounds */
    --theme-header-bg: #000000;
    --theme-bg-danger: rgba(255, 71, 87, 0.15);
    --theme-bg-success: rgba(0, 255, 136, 0.15);
    --theme-bg-warning: rgba(255, 190, 11, 0.15);
    --theme-bg-info: rgba(0, 212, 255, 0.15);

    /* Surfaces & Borders - Dark with cyan glow borders */
    --theme-surface: #0a0a12;
    --theme-surface-secondary: #000000;
    --theme-border: rgba(0, 212, 255, 0.4);

    /* Inputs */
    --theme-input-bg: rgba(0, 0, 0, 0.7);
    --theme-input-border: rgba(0, 212, 255, 0.5);
    --theme-input-text: #e0f7ff;
    --theme-input-focus: #00ffff;

    /* Buttons - Cyan neon accent */
    --theme-primary: #00d4ff;
    --theme-primary-hover: #00ffff;
    --theme-btn-text: #000000;
    --theme-secondary: #0a0a1a;
    --theme-secondary-hover: #151528;
    --theme-secondary-text: #00d4ff;
    --theme-accent: #00d4ff;

    /* RGB Triplets (for alpha transparency) */
    --theme-primary-rgb: 0, 212, 255;
    --theme-accent-rgb: 0, 212, 255;

    /* Sign-in Button */
    --theme-signin-color: #00d4ff;
    --theme-signin-hover-bg: rgba(0, 212, 255, 0.2);

    /* Chips/Tags */
    --theme-chip-bg: rgba(0, 212, 255, 0.1);
    --theme-chip-color: #00d4ff;
    --theme-chip-hover-bg: rgba(0, 212, 255, 0.2);
    --theme-chip-border: rgba(0, 212, 255, 0.5);

    /* Links */
    --theme-link-color: #38bdf8;
    --theme-link-hover-color: #00ffff;
    --theme-link-hover-bg: rgba(0, 212, 255, 0.1);

    /* Footer */
    --theme-footer-color: rgba(0, 212, 255, 0.6);
    --theme-footer-hover-color: #00ffff;

    /* Gradients */
    --theme-gradient-text: linear-gradient(135deg, #00d4ff 0%, #00ffff 50%, #00d4ff 100%);

    /* HALO-1h (2026-08-21): the halo mark's ink chain reads --theme-gradient-text.
       On this theme that variable holds a GRADIENT, which is invalid for `color` -
       the declaration then dies at computed-value time and the mark falls back to
       INHERITING its host's colour (dark slate), which is why the ring read dull
       here while every solid-colour theme looked right. A theme whose gradient-text
       is an actual gradient must name its own halo ink. */
    --nts-halo-ink: #00ffff;
    --theme-cta-gradient: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);

    /* Shadows - Neon glow effect */
    --theme-shadow-color: rgba(0, 212, 255, 0.6);
    --theme-title-shadow: 0 0 30px rgba(0, 212, 255, 0.6), 0 0 60px rgba(0, 212, 255, 0.3);
    --theme-subtitle-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
}

/* 🎮 TRON EASTER EGG: Light Cycle Grid Trace
   A single beam of light traces through the grid like a light cycle
   mapping out The Grid. "End of Line." */

/* Prevent light cycle beam from causing scrollbars - applied to body not content */
body.theme-tron,
html.theme-tron {
    overflow-x: clip;
}

/* TG-V-3 (2026-05-10): "Light cycle beam" full upgrade.
   Pre-fix: 80×2px bar at opacity 0.85 with bright white tip + heavy
   box-shadow halo, animated linearly through arbitrary corner positions
   on a 30s cycle. User feedback: "shorten the moving beam ... like a
   third of what it was ... let's give it a full upgrade — we can do
   better".

   Upgrade design:
     1. Size cut from 80×2px → 24×1.5px. The previous "beam" read as a
        prominent UI element; the new "data packet" reads as background
        ambient signal.
     2. Gradient sharpened: shorter trail with steeper falloff (transparent
        for first 60% of width, then ramps to cyan-bright tip). Reads as
        a head with a brief fading wake instead of a long uniform bar.
     3. Box-shadow tightened: 4px + 8px halo (was 6 + 15 + 30). Glow now
        feels like a packet's electromagnetic signature, not a flashlight.
     4. Opacity max cut from 0.85 → 0.5 — present but not assertive.
     5. Cycle slowed 30s → 60s. Beam takes its time tracing the path,
        feels deliberate rather than urgent.
     6. Easing: ease-in-out (was linear). Smoother acceleration into and
        out of corners.
     7. Path: 4 right-angle traces forming a clean rectangle tour. Corner
        positions kept (60% / 25% / 35% / 70%) but with brief opacity
        pulses at each turn to mark the corner moments without adding
        mass.
     8. Border-radius added (1px) so the head is slightly rounded, not a
        hard rectangular slab. */
.theme-tron::before {
    content: '';
    position: fixed;
    width: 24px;
    height: 1.5px;
    background: linear-gradient(90deg,
        rgba(0, 212, 255, 0) 0%,
        rgba(0, 212, 255, 0) 50%,
        rgba(0, 212, 255, 0.3) 70%,
        rgba(0, 255, 255, 0.85) 95%,
        rgba(220, 255, 255, 1) 100%);
    box-shadow:
        0 0 4px rgba(0, 255, 255, 0.55),
        0 0 8px rgba(0, 212, 255, 0.25);
    border-radius: 1px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform-origin: right center;
    animation: gridtrace 60s ease-in-out infinite;
    animation-delay: 3s;
}

/* Disable the beam on any nested .theme-tron elements */
.theme-tron .theme-tron::before {
    content: none;
    animation: none;
    display: none;
}

@keyframes gridtrace {
    /* TG-V-3 (2026-05-10): Path retains the rectangular tour shape but
       the brief corner pulses (opacity 0.5 → 0.7 → 0.5 across 2% of
       the cycle) replace the previous uniform-brightness corners. */

    /* Enter from off-screen left */
    0%   { top: 180px; left: -24px;                  transform: rotate(0deg);   opacity: 0; }
    2%   { top: 180px; left: 0;                      transform: rotate(0deg);   opacity: 0.5; }

    /* Trace right across upper area */
    18%  { top: 180px; left: calc(60% - 24px);       transform: rotate(0deg);   opacity: 0.5; }
    19%  { top: 180px; left: calc(60% - 24px);       transform: rotate(0deg);   opacity: 0.7; }  /* corner ack */
    20%  { top: 180px; left: 60%;                    transform: rotate(90deg);  opacity: 0.5; }

    /* Trace down */
    36%  { top: 70%;   left: 60%;                    transform: rotate(90deg);  opacity: 0.5; }
    37%  { top: 70%;   left: 60%;                    transform: rotate(90deg);  opacity: 0.7; }
    38%  { top: 70%;   left: 60%;                    transform: rotate(180deg); opacity: 0.5; }

    /* Trace left */
    54%  { top: 70%;   left: 25%;                    transform: rotate(180deg); opacity: 0.5; }
    55%  { top: 70%;   left: 25%;                    transform: rotate(180deg); opacity: 0.7; }
    56%  { top: 70%;   left: 25%;                    transform: rotate(270deg); opacity: 0.5; }

    /* Trace up */
    72%  { top: 35%;   left: 25%;                    transform: rotate(270deg); opacity: 0.5; }
    73%  { top: 35%;   left: 25%;                    transform: rotate(270deg); opacity: 0.7; }
    74%  { top: 35%;   left: 25%;                    transform: rotate(360deg); opacity: 0.5; }

    /* Trace right and exit */
    90%  { top: 35%;   left: calc(100% + 24px);      transform: rotate(360deg); opacity: 0.5; }
    92%  { opacity: 0; }

    100% { top: 180px; left: -24px;                  transform: rotate(360deg); opacity: 0; }
}

    /* ============================================
       🌙 PHASE 4: AUTO DARK MODE DETECTION
       Automatically applies Space theme when user's
       OS prefers dark color scheme.
   
       This only applies when no explicit theme class
       is set (default state). User's manual theme
       choice always takes precedence.
       ============================================ */
    @media (prefers-color-scheme: dark) {
        /* Apply Space theme as default dark mode */
        .public-page:not(.theme-cloud):not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-executive):not(.theme-mystic):not(.theme-tron) {
            /* Text Colors */
            --theme-text-primary: #f1f5f9;
            --theme-text-danger: #f87171;
            --theme-text-success: #4ade80;
            --theme-text-warning: #fbbf24;
            --theme-text-info: #38bdf8;
            --theme-text-secondary: #94a3b8;
            --theme-text-muted: #64748b;
            --theme-text-hint: #94a3b8;

            /* Header & Action Backgrounds */
            --theme-header-bg: #0f0a1e;
            --theme-bg-danger: rgba(239, 68, 68, 0.15);
            --theme-bg-success: rgba(34, 197, 94, 0.15);
            --theme-bg-warning: rgba(245, 158, 11, 0.15);
            --theme-bg-info: rgba(56, 189, 248, 0.15);

            /* Surfaces & Borders */
            --theme-surface: #1e293b;
            --theme-surface-secondary: #0f172a;
            --theme-border: #334155;
            
            /* Inputs */
            --theme-input-bg: rgba(15, 23, 42, 0.7);
            --theme-input-border: #475569;
            --theme-input-text: #f1f5f9;
            --theme-input-focus: #a855f7;

            /* Buttons */
            --theme-primary: #a855f7;
            --theme-primary-hover: #9333ea;
            --theme-btn-text: #ffffff;
            --theme-secondary: #334155;
            --theme-secondary-hover: #475569;
            --theme-secondary-text: #f1f5f9;
            --theme-accent: #a855f7;
        
            /* Sign-in Button */
            --theme-signin-color: #ffffff;
            --theme-signin-hover-bg: rgba(255, 255, 255, 0.1);
        
            /* Chips/Tags */
            --theme-chip-bg: rgba(168, 85, 247, 0.2);
            --theme-chip-color: #c4b5fd;
            --theme-chip-hover-bg: rgba(168, 85, 247, 0.3);
            --theme-chip-border: rgba(168, 85, 247, 0.4);
        
            /* Links */
            --theme-link-color: #64748b;
            --theme-link-hover-color: #94a3b8;
            --theme-link-hover-bg: rgba(255, 255, 255, 0.05);
        
            /* Footer */
            --theme-footer-color: rgba(255, 255, 255, 0.5);
            --theme-footer-hover-color: rgba(255, 255, 255, 0.8);
        
            /* Gradients (Flattened) */
            --theme-gradient-text: #a855f7;
            --theme-cta-gradient: #a855f7;
        
            /* Shadows */
            --theme-shadow-color: rgba(168, 85, 247, 0.5);
            --theme-title-shadow: 0 0 40px rgba(168, 85, 247, 0.5);
            --theme-subtitle-shadow: 0 0 20px rgba(148, 163, 184, 0.3);
        }

        /* Also apply Space theme to :root when OS prefers dark mode
           and no explicit theme class is set on html element.
           This ensures authenticated pages get dark theme on initial load
           before JavaScript applies the theme class. */
        :root:not(.theme-cloud):not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron):not(.theme-executive) {
            /* Surfaces & Borders (most critical for initial render) */
            --theme-surface: #1e293b;
            --theme-surface-secondary: #0f172a;
            --theme-border: #334155;
            
            /* Inputs */
            --theme-input-bg: rgba(15, 23, 42, 0.7);
            --theme-input-border: #475569;
            --theme-input-text: #f1f5f9;
            --theme-input-focus: #a855f7;

            /* Text Colors */
            --theme-text-primary: #f1f5f9;
            --theme-text-secondary: #94a3b8;
            --theme-text-muted: #64748b;
            --theme-text-hint: #94a3b8;

            /* Buttons */
            --theme-primary: #a855f7;
            --theme-primary-hover: #9333ea;
            --theme-btn-text: #ffffff;
            --theme-secondary: #334155;
            --theme-secondary-hover: #475569;
            --theme-secondary-text: #f1f5f9;
            --theme-accent: #a855f7;
        }
    }

/* ============================================
   🔗 LEGACY TOKEN ALIASES (THEME-TOKENS-2, 2026-09-29)
   ~70 component rules reference --theme-bg-* names that NO theme ever defined, so they
   always rendered their fallback (a light hex, a black/indigo tint, or nothing) - see
   GOTCHAS #466. These aliases make the old names real, pointing at the tokens every theme
   defines. Declared on :root AND on every theme class because a custom property that
   references another resolves on the element where it is declared: a component that
   carries its own `theme-x` class re-resolves the alias against that theme's values.
   New code: use the real names (--theme-surface, --theme-surface-secondary, ...), not these.
   ============================================ */
:root,
.theme-executive, .theme-executivedark, .theme-cloud, .theme-space, .theme-winter,
.theme-nature, .theme-ocean, .theme-mystic, .theme-tron {
    --theme-bg-primary:   var(--theme-surface);           /* was: card / panel background   */
    --theme-bg-elevated:  var(--theme-surface);           /* raised card, popover            */
    --theme-bg-secondary: var(--theme-surface-secondary); /* inset area, alt row, ring       */
    --theme-bg-main:      var(--theme-surface-secondary); /* app-base fill (background-color)*/
    --theme-bg-tertiary:  var(--theme-chip-bg);           /* chip / pill fill                */
    --theme-bg-input:     var(--theme-input-bg);
    --theme-bg-hover:     var(--theme-link-hover-bg);     /* subtle hover wash               */
    --theme-bg-error:     var(--theme-bg-danger);
}