/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — System Like ERP
   Single source of truth for all visual properties.
   ═══════════════════════════════════════════════════════ */

:root {
    /* --- Typography --- */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 0.9375rem;
    /* 15px — slightly tighter for density */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 1.875rem;
    /* 30px */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* --- Spacing (8pt grid) --- */
    --spacing-2xs: 0.125rem;
    /* 2px */
    --spacing-xs: 0.25rem;
    /* 4px */
    --spacing-sm: 0.5rem;
    /* 8px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-2xl: 3rem;
    /* 48px */

    /* --- Border Radius --- */
    --radius-xs: 0.25rem;
    /* 4px */
    --radius-sm: 0.375rem;
    /* 6px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-full: 9999px;

    /* --- Transitions --- */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* --- Z-Index Scale --- */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-toast: 1100;

    /* --- Sidebar --- */
    --sidebar-width: 260px;
    --header-height: 60px;
}

/* ═══════════════════════════════════════════
   THEME: LIGHT
   Clean, high-contrast, premium (Failover Inverse)
   ═══════════════════════════════════════════ */
:root,
[data-theme="light"] {
    /* Backgrounds — Surface hierarchy */
    --bg-body: #f6f8fa;
    --bg-body-rgb: 246, 248, 250;
    --bg-surface: #ffffff;
    --bg-surface-rgb: 255, 255, 255;
    --bg-surface-secondary: #f3f4f6;
    --bg-surface-elevated: #ffffff;
    --bg-surface-sunken: #f0f2f5;
    --bg-surface-hover: #f1f5f9;
    --bg-surface-active: #e5e7eb;

    /* Text */
    --text-primary: #1f2328;
    --text-secondary: #656d76;
    --text-muted: #6e7781;
    --text-placeholder: #8c959f;
    --text-inverse: #ffffff;

    /* Borders & Dividers */
    --border-color: #d0d7de;
    --border-color-strong: #afb8c1;
    --divider-color: #d8dee4;

    /* Primary — Dark for branding */
    --primary-color: #1f2328;
    --primary-contrast: #ffffff;

    /* Accent — GitHub Blue */
    --accent-color: #0969da;
    --accent-color-rgb: 9, 105, 218;
    --accent-hover: #0550ae;
    --accent-light: #ddf4ff;
    --accent-subtle: rgba(9, 105, 218, 0.08);

    /* Semantic Colors */
    --success-color: #1a7f37;
    --success-color-rgb: 26, 127, 55;
    --success-light: #dafbe1;
    --success-subtle: rgba(26, 127, 55, 0.08);

    --warning-color: #9a6700;
    --warning-color-rgb: 154, 103, 0;
    --warning-light: #fff8c5;
    --warning-subtle: rgba(154, 103, 0, 0.08);

    --danger-color: #d1242f;
    --danger-color-rgb: 209, 36, 47;
    --danger-light: #ffebe9;
    --danger-subtle: rgba(209, 36, 47, 0.08);

    --info-color: #0969da;
    --info-color-rgb: 9, 105, 218;
    --info-light: #ddf4ff;
    --info-subtle: rgba(9, 105, 218, 0.08);

    /* Brand Colors for Sidebar Icons */
    --brand-cyan: #0891b2;
    --brand-emerald: #059669;
    --brand-orange: #ea580c;
    --brand-rose: #e11d48;
    --brand-violet: #7c3aed;
    --brand-amber: #d97706;

    /* Shadows — Subtle and refined */
    --shadow-xs: 0 1px 2px rgba(31, 35, 40, 0.04);
    --shadow-sm: 0 1px 3px rgba(31, 35, 40, 0.08);
    --shadow-md: 0 3px 6px rgba(31, 35, 40, 0.12);
    --shadow-lg: 0 8px 24px rgba(31, 35, 40, 0.15);
    --shadow-xl: 0 12px 48px rgba(31, 35, 40, 0.18);
    --shadow-focus: 0 0 0 3px rgba(9, 105, 218, 0.3);

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(208, 215, 222, 0.8);

    /* Background Gradients (Light) */
    --gradient-bg: radial-gradient(at 0% 0%, rgba(9, 105, 218, 0.05) 0px, transparent 50%),
                   radial-gradient(at 100% 0%, rgba(209, 36, 47, 0.02) 0px, transparent 50%);
}


/* ═══════════════════════════════════════════
   THEME: DARK
   Deep, polished, premium (Failover Style)
   ═══════════════════════════════════════════ */
[data-theme="dark"] {
    /* Backgrounds — Onyx hierarchy */
    --bg-body: #0b0e14;
    --bg-body-rgb: 11, 14, 20;
    --bg-surface: #11151c;
    --bg-surface-rgb: 17, 21, 28;
    --bg-surface-secondary: #161b22;
    --bg-surface-elevated: #161b22;
    --bg-surface-sunken: #010409;
    --bg-surface-hover: rgba(255, 255, 255, 0.03);
    --bg-surface-active: rgba(255, 255, 255, 0.05);

    /* Text */
    --text-primary: #f0f6fc;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --text-placeholder: #484f58;
    --text-inverse: #0b0e14;

    /* Borders */
    --border-color: #30363d;
    --border-color-strong: #484f58;
    --border-color-subtle: #21262d;
    --divider-color: #21262d;

    /* Primary */
    --primary-color: #f0f6fc;
    --primary-contrast: #0b0e14;

    /* Accent — GitHub Blue */
    --accent-color: #1f6feb;
    --accent-color-rgb: 31, 111, 235;
    --accent-hover: #388bfd;
    --accent-light: #121d2f;
    --accent-subtle: rgba(31, 111, 235, 0.15);

    /* Semantic Colors — Enhanced Contrast */
    --success-color: #3fb950;
    --success-color-rgb: 63, 185, 80;
    --success-light: #0d2a12;
    --success-subtle: rgba(63, 185, 80, 0.15);

    --warning-color: #d29922; /* Mustard Failover */
    --warning-color-rgb: 210, 153, 34;
    --warning-light: #2b1d07;
    --warning-subtle: rgba(210, 153, 34, 0.15);

    --danger-color: #f85149; /* Red Failover */
    --danger-color-rgb: 248, 81, 73;
    --danger-light: #321010;
    --danger-subtle: rgba(248, 81, 73, 0.15);

    --info-color: #2f81f7;
    --info-color-rgb: 47, 129, 247;
    --info-light: #121d2f;
    --info-subtle: rgba(47, 129, 247, 0.15);

    /* Brand Colors for Sidebar Icons (Dark) */
    --brand-cyan: #22d3ee;
    --brand-emerald: #34d399;
    --brand-orange: #fb923c;
    --brand-rose: #fb7185;
    --brand-violet: #a78bfa;
    --brand-amber: #fbbf24;

    /* Chart Palette */
    --chart-1: #1f6feb;
    --chart-2: #3fb950;
    --chart-3: #d29922;
    --chart-4: #f85149;
    --chart-5: #a371f7;
    --chart-6: #2f81f7;

    /* Shadows — Deep and expansive */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.8);
    --shadow-focus: 0 0 0 3px rgba(31, 111, 235, 0.4);

    /* Glass */
    --glass-bg: rgba(17, 21, 28, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);

    /* Background Gradients (Dark) */
    --gradient-bg: radial-gradient(at 0% 0%, rgba(31, 111, 235, 0.1) 0px, transparent 50%),
                   radial-gradient(at 100% 0%, rgba(248, 81, 73, 0.05) 0px, transparent 50%);

    /* Opacity helpers */
    --overlay-bg: rgba(0, 0, 0, 0.75);
    --table-row-hover: rgba(255, 255, 255, 0.02);
    --table-row-stripe: rgba(255, 255, 255, 0.01);
    --kbd-bg: #21262d;
    --kbd-text: #f0f6fc;
}


/* ═══════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0.01ms;
        --transition-base: 0.01ms;
        --transition-slow: 0.01ms;
    }
}