/* ═══════════════════════════════════════════════════════════════
   Global Variables Module — Zentix 2026 Design System
   ═══════════════════════════════════════════════════════════════
   This file is the SINGLE SOURCE OF TRUTH for all CSS custom
   properties. Theme files (dark.css, light.css) override only
   the tokens listed here — they never introduce new ones.

   Load order: This file MUST be loaded FIRST, before themes
   and components.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── BRAND COLORS ── */
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --secondary-color: #64748b;
    --accent-color: #f43f5e;
    --accent-glow: rgba(244, 63, 94, 0.35);
    
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    
    /* ── NEUTRAL PALETTE ── */
    --white: #ffffff;
    --surface-base: #ffffff;
    --black: #000000;
    --gray: #475569;
    --light-gray: #f1f5f9;
    --dark-gray: #334155;
    
    /* ── TYPOGRAPHY ── */
    --font-primary: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Inter', -apple-system, sans-serif;
    
    /* ── LAYOUT & GEOMETRY ── */
    --radius-pill: 9999px;
    --box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --box-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ── CORE GRADIENTS ── */
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
    --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #312e81 100%);
    --gradient-accent: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);

    /* ═══════════════════════════════════════════════════════
       SEMANTIC TOKENS — Light Mode Defaults
       These are the tokens that themes override.
       ═══════════════════════════════════════════════════════ */

    /* ── TEXT ── */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-light: #94a3b8;

    /* ── SURFACES ── */
    --card-bg: rgba(255, 255, 255, 0.90);
    --card-bg-hover: #f8fafc;
    --bg-secondary: rgba(248, 250, 252, 0.9);
    --border-color: #cbd5e1;

    /* ── HEADER ── */
    --header-bg: rgba(248, 250, 252, 0.0);
    --header-bg-scrolled: rgba(248, 250, 252, 0.95);
    --dark-color: #0f172a;
    --light-color: #f1f5f9;

    /* ── GLASSMORPHISM ── */
    --glass-bg: rgba(248, 250, 252, 0.85);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-blur: blur(12px) saturate(150%);

    /* ── HEADER GLASS SYSTEM ── */
    --header-glass-bg: rgba(255, 255, 255, 0.62);
    --header-glass-blur: blur(10px) saturate(120%);
    --header-glass-border: rgba(0, 0, 0, 0.05);
    --header-glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    --dropdown-glass-bg: rgba(255, 255, 255, 0.92);
    --dropdown-glass-blur: blur(20px) saturate(160%);
    --sidebar-glass-bg: rgba(255, 255, 255, 0.94);
    --sidebar-glass-blur: blur(24px) saturate(150%);

    /* ── SHADOWS ── */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);

    /* ── INPUTS / FORMS ── */
    --input-bg: #f8fafc;
    --input-border-color: #e2e8f0;
    --input-placeholder: #94a3b8;
    --input-focus-border: #6366f1;
    --input-focus-ring: rgba(99, 102, 241, 0.12);

    /* ── TABLES ── */
    --table-header-bg: rgba(248, 250, 252, 0.9);
    --table-header-color: #475569;
    --table-row-border: rgba(226, 232, 240, 0.4);
    --table-hover-bg: rgba(99, 102, 241, 0.03);

    /* ── SIDEBAR ── */
    --sidebar-bg: rgba(255, 255, 255, 0.92);
    --sidebar-border: rgba(226, 232, 240, 0.6);
    --sidebar-link-color: #475569;
    --sidebar-link-active: #6366f1;
    --sidebar-link-hover-bg: rgba(99, 102, 241, 0.06);

    /* ── FOOTER ── */
    --footer-bg: rgba(248, 250, 252, 0.9);
    --footer-border: rgba(226, 232, 240, 0.6);

    /* ── BADGES ── */
    --badge-connected-bg: rgba(16, 185, 129, 0.08);
    --badge-connected-color: #059669;
    --badge-connected-border: rgba(16, 185, 129, 0.2);
    --badge-disconnected-bg: rgba(239, 68, 68, 0.08);
    --badge-disconnected-color: #dc2626;
    --badge-disconnected-border: rgba(239, 68, 68, 0.2);
}


/* ═══════════════════════════════════════════════════════
   LIGHT THEME — Explicit (mirrors :root defaults)
   Used when html[data-theme="light"] is explicitly set.
   ═══════════════════════════════════════════════════════ */
html[data-theme="light"],
body.light-theme {
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-light: #94a3b8;
    --border-color: #cbd5e1;
    --card-bg: rgba(255, 255, 255, 0.90);
    --card-bg-hover: #f8fafc;
    --bg-secondary: rgba(248, 250, 252, 0.9);
    --header-bg: rgba(248, 250, 252, 0.0);
    --header-bg-scrolled: rgba(248, 250, 252, 0.95);
    --dark-color: #0f172a;
    --light-color: #f1f5f9;
    --glass-bg: rgba(248, 250, 252, 0.85);
    --glass-border: rgba(0, 0, 0, 0.1);
    --header-glass-bg: rgba(255, 255, 255, 0.62);
    --header-glass-blur: blur(10px) saturate(120%);
    --header-glass-border: rgba(0, 0, 0, 0.05);
    --header-glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    --dropdown-glass-bg: rgba(255, 255, 255, 0.92);
    --dropdown-glass-blur: blur(20px) saturate(160%);
    --sidebar-glass-bg: rgba(255, 255, 255, 0.94);
    --sidebar-glass-blur: blur(24px) saturate(150%);
}

/* Firefox fallback */
@supports not (backdrop-filter: blur(1px)) {
    html[data-theme="light"],
    body.light-theme {
        --header-glass-bg: rgba(255, 255, 255, 0.85);
    }
}


/* ═══════════════════════════════════════════════════════
   DARK THEME
   ═══════════════════════════════════════════════════════ */
html[data-theme="dark"],
body.dark-mode {
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-light: #94a3b8;
    --gray: #64748b;
    --border-color: rgba(255, 255, 255, 0.09);
    --card-bg: rgba(15, 20, 40, 0.80);
    --card-bg-hover: #1f2937;
    --bg-secondary: rgba(30, 41, 59, 0.6);
    --header-bg: rgba(5, 5, 16, 0.0);
    --header-bg-scrolled: rgba(10, 10, 28, 0.88);
    --dark-color: #e2e8f0;
    --light-color: #0d0d1e;
    --light-gray: rgba(255, 255, 255, 0.05);
    --white: #0f0f1e;
    --surface-base: #0f0f1e;
    --glass-bg: rgba(15, 20, 40, 0.70);
    --glass-border: rgba(255, 255, 255, 0.07);
    --header-glass-bg: rgba(0, 0, 0, 0.18);
    --header-glass-blur: blur(12px) saturate(180%);
    --header-glass-border: rgba(255, 255, 255, 0.1);
    --header-glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    --dropdown-glass-bg: rgba(18, 18, 30, 0.85);
    --dropdown-glass-blur: blur(20px) saturate(160%);
    --sidebar-glass-bg: rgba(12, 12, 24, 0.88);
    --sidebar-glass-blur: blur(24px) saturate(150%);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2);

    /* Inputs */
    --input-bg: rgba(30, 41, 59, 0.8);
    --input-border-color: rgba(71, 85, 105, 0.7);
    --input-placeholder: rgba(148, 163, 184, 0.55);
    --input-focus-border: #6366f1;
    --input-focus-ring: rgba(99, 102, 241, 0.18);

    /* Glassmorphism */
    --glass-blur: blur(12px) saturate(150%);

    /* Tables */
    --table-header-bg: rgba(30, 41, 59, 0.5);
    --table-header-color: rgba(226, 232, 240, 0.85);
    --table-row-border: rgba(148, 163, 184, 0.08);
    --table-hover-bg: rgba(99, 102, 241, 0.06);

    /* Sidebar */
    --sidebar-bg: rgba(11, 18, 32, 0.92);
    --sidebar-border: rgba(148, 163, 184, 0.1);
    --sidebar-link-color: #94a3b8;
    --sidebar-link-active: #818cf8;
    --sidebar-link-hover-bg: rgba(99, 102, 241, 0.12);

    /* Footer */
    --footer-bg: rgba(15, 23, 42, 0.6);
    --footer-border: rgba(148, 163, 184, 0.1);

    /* Badges */
    --badge-connected-bg: rgba(16, 185, 129, 0.15);
    --badge-connected-color: #34d399;
    --badge-connected-border: rgba(16, 185, 129, 0.25);
    --badge-disconnected-bg: rgba(239, 68, 68, 0.15);
    --badge-disconnected-color: #f87171;
    --badge-disconnected-border: rgba(239, 68, 68, 0.25);
}


/* ═══════════════════════════════════════════════════════
   SYSTEM PREFERENCE FALLBACK
   ═══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --text-primary: #e2e8f0;
        --text-secondary: #94a3b8;
        --border-color: rgba(255, 255, 255, 0.09);
        --card-bg: rgba(15, 20, 40, 0.80);
        --header-bg: rgba(5, 5, 16, 0.0);
        --header-bg-scrolled: rgba(10, 10, 28, 0.88);
        --dark-color: #e2e8f0;
        --light-color: #0d0d1e;
        --light-gray: rgba(255, 255, 255, 0.05);
        --white: #0f0f1e;
        --surface-base: #0f0f1e;
        --glass-bg: rgba(15, 20, 40, 0.70);
        --glass-border: rgba(255, 255, 255, 0.07);
        --header-glass-bg: rgba(0, 0, 0, 0.18);
        --header-glass-border: rgba(255, 255, 255, 0.1);
        --dropdown-glass-bg: rgba(18, 18, 30, 0.85);
        --sidebar-glass-bg: rgba(12, 12, 24, 0.88);
    }
}