/**
 * Theme System — Light Mode (Elegant v2.0)
 * Design Language: Premium SaaS · Signal over Noise · Calm Authority
 * 
 * Fonts: Poppins (display / body) · Inter (micro-UI / labels) · Instrument Serif (accent)
 * Palette: Tech Blue #0070f3 · Slate #f8fafc · Gold #b48600
 * 
 * @package HI_Platform
 * @version 2.1.0
 */

/* ==================== DESIGN TOKENS ==================== */

:root,
[data-theme="dark"],
[data-theme="light"] {
    /* Theme transition */
    --theme-transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;

    /* Font Families — Elegant Premium v2.1 (Poppins primary) */
    --font-display: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-head: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Global `--font-mono` token: resolves to Inter for clean micro-UI. */
    --font-mono: 'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Instrument Serif', 'Playfair Display', Georgia, serif;

    /* Layout & Spacing */
    --container-max-width: 1400px;
    --container-padding: 24px;
    --section-spacing: 80px;
    --card-spacing: 24px;
    --content-max-width: 1200px;

    /* Border Radius (Moodboard scale) */
    --radius-xs: 4px;     /* Inputs */
    --radius-sm: 8px;     /* Buttons */
    --radius-md: 12px;    /* Badges */
    --radius-lg: 16px;    /* Cards */
    --radius-xl: 20px;    /* Panels */
    --radius-full: 9999px; /* Pills */

    /* Animation Timing */
    --motion-gentle: 18s;
    --motion-medium: 12s;
    --motion-border: 9s;
    --motion-panel: 0.6s;

    /* ── ELEGANT PALETTE (Premium SaaS) ─────────────────── */

    /* Tech Blue — Primary Brand */
    --hi-cyan: #0070f3;
    --hi-cyan-dim: rgba(0, 112, 243, 0.08);
    --hi-cyan-mid: rgba(0, 112, 243, 0.15);
    --hi-cyan-glow: rgba(0, 112, 243, 0.25);

    /* Gold — Accent / HIRA */
    --hi-gold: #b48600;
    --hi-gold-dim: rgba(180, 134, 0, 0.08);

    /* Slate — Backgrounds */
    --hi-bg: #f8fafc;
    --hi-bg2: #f1f5f9;
    --hi-bg3: #e2e8f0;

    /* Surfaces */
    --hi-white: #ffffff;
    --hi-surface: #ffffff;
    --hi-surface-2: #fafbfc;

    /* Borders */
    --hi-border: rgba(15, 23, 42, 0.08);
    --hi-border-strong: rgba(15, 23, 42, 0.12);

    /* Text */
    --hi-text-main: #0f172a;
    --hi-text-sec: #475569;
    --hi-text-muted: #64748b;
    --hi-text-muted2: #94a3b8;

    /* Legacy Navy (preserved for compatibility) */
    --hi-navy: #0D1B2A;
    --hi-navy-mid: #1A2F4A;

    /* Status Colors */
    --hi-green: #059669;
    --hi-green-light: #D1FAE5;
    --hi-amber: #D97706;
    --hi-amber-light: #FEF3C7;

    /* ── BACKWARD-COMPATIBLE VARIABLE MAP ── */

    /* Base Colors */
    --color-bg-primary: #f8fafc;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f1f5f9;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-hover: #fafbfc;

    /* Text Colors */
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;
    --color-text-inverse: #ffffff;
    --color-text-disabled: #94a3b8;

    /* Border Colors */
    --color-border-primary: rgba(15, 23, 42, 0.08);
    --color-border-secondary: rgba(15, 23, 42, 0.08);
    --color-border-hover: #0070f3;
    --color-border-focus: #0070f3;

    /* Accent Colors (mapped to Tech Blue) */
    --color-accent-cyan: #0070f3;
    --color-accent-cyan-dark: #005bb5;
    --color-accent-purple: #0070f3;
    --color-accent-purple-dark: #005bb5;
    --color-accent-green: #059669;
    --color-accent-green-dark: #047857;

    /* Semantic Colors */
    --color-primary: #0070f3;
    --color-primary-hover: #005bb5;
    --color-secondary: #0f172a;
    --color-secondary-hover: #1e293b;
    --color-success: #059669;
    --color-success-hover: #047857;
    --color-warning: #b48600;
    --color-warning-hover: #9a7200;
    --color-error: #dc2626;
    --color-error-hover: #b91c1c;
    --color-info: #0070f3;
    --color-info-hover: #005bb5;

    /* Glow Effects (elegant subtle) */
    --glow-cyan: rgba(0, 112, 243, 0.08);
    --glow-purple: rgba(0, 112, 243, 0.08);
    --glow-green: rgba(5, 150, 105, 0.08);

    /* Shadows (refined for premium aesthetic) */
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08);
    --shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.10);
    --shadow-2xl: 0 32px 80px rgba(15, 23, 42, 0.12);
    --shadow-glow-cyan: 0 4px 20px rgba(0, 112, 243, 0.15);
    --shadow-glow-purple: 0 4px 20px rgba(0, 112, 243, 0.15);

    /* Card System (elegant) */
    --card-bg: #ffffff;
    --card-bg-hover: #fafbfc;
    --card-border: rgba(15, 23, 42, 0.08);
    --card-border-hover: rgba(0, 112, 243, 0.2);
    --card-shadow: var(--shadow-sm);
    --card-gradient: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);

    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(15, 23, 42, 0.08);
    --glass-blur: blur(20px);

    /* Input System (elegant) */
    --input-bg: #f8fafc;
    --input-bg-focus: #ffffff;
    --input-border: rgba(15, 23, 42, 0.08);
    --input-border-focus: #0070f3;
    --input-text: #0f172a;
    --input-placeholder: #94a3b8;

    /* Button System — Tech Blue primary (elegant) */
    --btn-primary-bg: #0070f3;
    --btn-primary-bg-hover: #005bb5;
    --btn-primary-text: #ffffff;
    --btn-primary-shadow: 0 4px 14px rgba(0, 112, 243, 0.15);
    --btn-primary-shadow-hover: 0 6px 20px rgba(0, 112, 243, 0.25);

    --btn-secondary-bg: #ffffff;
    --btn-secondary-bg-hover: #f1f5f9;
    --btn-secondary-text: #0f172a;
    --btn-secondary-border: rgba(15, 23, 42, 0.08);

    /* Gold Button (HIRA accent) */
    --btn-gold-bg: linear-gradient(135deg, #fffbeb, #fef3c7);
    --btn-gold-bg-hover: linear-gradient(135deg, #fef3c7, #fde68a);
    --btn-gold-text: #b48600;
    --btn-gold-border: rgba(180, 134, 0, 0.3);

    /* Modal System (elegant) */
    --modal-overlay: rgba(15, 23, 42, 0.4);
    --modal-bg: #ffffff;
    --modal-border: rgba(15, 23, 42, 0.08);
    --modal-shadow: var(--shadow-xl);

    /* Background Effects */
    --bg-gradient: #f8fafc;
    --bg-grid-color: rgba(0, 112, 243, 0.04);
    --bg-orb-opacity: 0;
}

/* ==================== UTILITY CLASSES ==================== */

.theme-bg-primary { background-color: var(--color-bg-primary); }
.theme-bg-secondary { background-color: var(--color-bg-secondary); }
.theme-surface { background-color: var(--color-surface); }

.theme-text-primary { color: var(--color-text-primary); }
.theme-text-secondary { color: var(--color-text-secondary); }
.theme-text-muted { color: var(--color-text-muted); }

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

/* Theme toggle — hidden (light mode only) */
.theme-toggle { display: none !important; }

/* ==================== ACCESSIBILITY ==================== */

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    :root {
        --color-text-primary: #000000;
        --color-border-primary: #000000;
    }
}