:root {
    color-scheme: light;

    /* Typography - Industrial Refined */
    --font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    --font-display: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;

    /* Type Scale - Refined */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;

    /* Letter Spacing */
    --tracking-tight: -0.03em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.12em;

    /* Surfaces - Enhanced Depth */
    --color-bg: #f4f6fb;
    --color-bg-muted: #e8ecf4;
    --color-surface: #ffffff;
    --color-surface-alt: #fafbfe;
    --color-surface-elevated: #ffffff;
    --color-surface-quiet: #f7f9fc;
    --glass-surface: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(148, 163, 184, 0.22);

    /* Primary - Deep Indigo (premium feel) */
    --color-primary: #4338ca;
    --color-primary-dark: #312e81;
    --color-primary-light: #6366f1;
    --color-primary-contrast: #ffffff;
    --color-primary-rgb: 67, 56, 202;

    /* Accent - Electric Teal (for highlights) */
    --color-accent: #14b8a6;
    --color-accent-rgb: 20, 184, 166;
    --color-secondary: #64748b;
    --color-secondary-rgb: 100, 116, 139;
    --color-success: #059669;
    --color-success-rgb: 5, 150, 105;
    --color-warning: #d97706;
    --color-warning-rgb: 217, 119, 6;
    --color-danger: #dc2626;
    --color-danger-rgb: 220, 38, 38;

    --color-text: #1e293b;
    --color-text-strong: #0f172a;
    --color-text-muted: #64748b;
    --color-text-subtle: #94a3b8;
    --color-text-inverse: #f8fafc;

    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-border-muted: #f1f5f9;

    --color-field-bg: rgba(255, 255, 255, 0.98);
    --color-field-bg-alt: rgba(250, 251, 254, 0.95);
    --color-field-border: rgba(203, 213, 225, 0.75);
    --color-field-placeholder: rgba(100, 116, 139, 0.6);
    --color-select-arrow: rgba(var(--color-primary-rgb), 0.7);

    /* Layered Shadows - Admin UI Kit */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 8px 18px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 18px 42px rgba(15, 23, 42, 0.12);
    --shadow-lg:
        0 8px 16px rgba(15, 23, 42, 0.06),
        0 16px 32px rgba(15, 23, 42, 0.08),
        0 32px 64px rgba(15, 23, 42, 0.1),
        0 48px 96px rgba(15, 23, 42, 0.08);
    --shadow-glow: 0 0 40px rgba(var(--color-primary-rgb), 0.15);
    --shadow-focus: 0 0 0 3px rgba(67, 56, 202, 0.2), 0 0 0 6px rgba(67, 56, 202, 0.08);
    --shadow-focus-accent: 0 0 0 3px rgba(20, 184, 166, 0.25);

    /* Layout Background - Admin UI Kit */
    --layout-background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);

    /* Navigation - Sophisticated Dark */
    --nav-background:
        linear-gradient(180deg, #0c1222 0%, #151d2e 50%, #1a2438 100%);
    --nav-border: rgba(255, 255, 255, 0.06);
    --nav-text: rgba(248, 250, 252, 0.92);
    --nav-text-muted: rgba(148, 163, 184, 0.7);
    --nav-hover-bg: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
    --nav-active-bg: linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.2) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
    --nav-active-shadow: inset 3px 0 0 var(--color-primary-light);
    --nav-text-active: #ffffff;
    --nav-logo-shadow:
        0 4px 12px rgba(var(--color-primary-rgb), 0.3),
        0 8px 24px rgba(var(--color-primary-rgb), 0.2);
    --nav-logo-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-accent) 100%);
    --badge-neutral-bg: rgba(100, 116, 139, 0.12);
    --badge-neutral-border: rgba(100, 116, 139, 0.2);
    --badge-neutral-color: #475569;
    --badge-primary-bg: rgba(var(--color-primary-rgb), 0.15);
    --badge-primary-color: var(--color-primary-dark);

    --surface-primary-soft: rgba(var(--color-primary-rgb), 0.1);
    --surface-primary-strong: rgba(var(--color-primary-rgb), 0.18);
    --surface-neutral-soft: rgba(100, 116, 139, 0.1);
    --surface-neutral-strong: rgba(100, 116, 139, 0.18);
    --surface-info-soft: rgba(var(--color-primary-rgb), 0.1);
    --surface-info-strong: rgba(var(--color-primary-rgb), 0.18);
    --surface-success-soft: rgba(var(--color-success-rgb), 0.1);
    --surface-warning-soft: rgba(var(--color-warning-rgb), 0.12);
    --surface-danger-soft: rgba(var(--color-danger-rgb), 0.1);
    --surface-accent-soft: rgba(var(--color-accent-rgb), 0.1);

    --stroke-primary-soft: rgba(var(--color-primary-rgb), 0.2);
    --stroke-info-soft: rgba(var(--color-primary-rgb), 0.25);
    --stroke-success-soft: rgba(var(--color-success-rgb), 0.3);
    --stroke-warning-soft: rgba(var(--color-warning-rgb), 0.35);
    --stroke-danger-soft: rgba(var(--color-danger-rgb), 0.3);

    --color-success-on-soft: #065f46;
    --color-warning-on-soft: #92400e;
    --color-danger-on-soft: #991b1b;
    --color-info-on-soft: var(--color-primary-dark);

    --chart-line: var(--color-primary);
    --chart-fill: rgba(var(--color-primary-rgb), 0.15);
    --chart-accent: var(--color-accent);

    --scrollbar-track: rgba(15, 23, 42, 0.04);
    --scrollbar-thumb: rgba(15, 23, 42, 0.15);
    --table-header-bg: rgba(var(--color-primary-rgb), 0.06);
    --table-row-alt: rgba(15, 23, 42, 0.02);
    --overlay-backdrop: rgba(15, 23, 42, 0.5);
    --code-surface: #1e293b;
    --code-text: #f1f5f9;

    --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.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #0f172a;
    --color-bg-muted: #1e293b;
    --color-surface: #1e293b;
    --color-surface-alt: #334155;
    --color-surface-elevated: #334155;
    --color-surface-quiet: #1e293b;
    --glass-surface: rgba(30, 41, 59, 0.9);
    --glass-border: rgba(71, 85, 105, 0.5);

    --color-primary: #818cf8;
    --color-primary-dark: #6366f1;
    --color-primary-light: #a5b4fc;
    --color-primary-contrast: #0f172a;
    --color-primary-rgb: 129, 140, 248;

    --color-accent: #22d3ee;
    --color-accent-rgb: 34, 211, 238;

    --color-secondary: #94a3b8;
    --color-secondary-rgb: 148, 163, 184;
    --color-success: #34d399;
    --color-success-rgb: 52, 211, 153;
    --color-warning: #fbbf24;
    --color-warning-rgb: 251, 191, 36;
    --color-danger: #f87171;
    --color-danger-rgb: 248, 113, 113;

    --color-text: #e2e8f0;
    --color-text-strong: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-text-subtle: #64748b;
    --color-text-inverse: #0f172a;

    --color-border: #334155;
    --color-border-strong: #475569;
    --color-border-muted: #1e293b;

    --color-field-bg: rgba(30, 41, 59, 0.95);
    --color-field-bg-alt: rgba(51, 65, 85, 0.9);
    --color-field-border: rgba(71, 85, 105, 0.8);
    --color-field-placeholder: rgba(148, 163, 184, 0.7);
    --color-select-arrow: rgba(226, 232, 240, 0.8);

    --shadow-xs:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-sm:
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.25);
    --shadow-md:
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.25),
        0 16px 32px rgba(0, 0, 0, 0.3);
    --shadow-lg:
        0 8px 16px rgba(0, 0, 0, 0.25),
        0 16px 32px rgba(0, 0, 0, 0.3),
        0 32px 64px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 50px rgba(var(--color-primary-rgb), 0.25);
    --shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.35), 0 0 0 6px rgba(129, 140, 248, 0.15);
    --shadow-focus-accent: 0 0 0 3px rgba(34, 211, 238, 0.35);

    --layout-background: linear-gradient(180deg, #0f172a 0%, #0c1222 100%);

    --nav-background:
        linear-gradient(180deg, #020617 0%, #0a0f1a 50%, #0f172a 100%);
    --nav-border: rgba(71, 85, 105, 0.3);
    --nav-text: rgba(226, 232, 240, 0.9);
    --nav-text-muted: rgba(148, 163, 184, 0.7);
    --nav-hover-bg: rgba(71, 85, 105, 0.3);
    --nav-active-bg: linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.2) 0%, rgba(var(--color-primary-rgb), 0.08) 100%);
    --nav-active-shadow: inset 3px 0 0 var(--color-primary);
    --nav-text-active: #f8fafc;
    --nav-logo-shadow: 0 8px 24px rgba(129, 140, 248, 0.3);
    --nav-logo-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);

    --badge-neutral-bg: rgba(148, 163, 184, 0.15);
    --badge-neutral-border: rgba(148, 163, 184, 0.25);
    --badge-neutral-color: #cbd5e1;
    --badge-primary-bg: rgba(var(--color-primary-rgb), 0.2);
    --badge-primary-color: var(--color-primary-light);

    --surface-primary-soft: rgba(var(--color-primary-rgb), 0.15);
    --surface-primary-strong: rgba(var(--color-primary-rgb), 0.25);
    --surface-neutral-soft: rgba(148, 163, 184, 0.12);
    --surface-neutral-strong: rgba(148, 163, 184, 0.2);
    --surface-info-soft: rgba(var(--color-primary-rgb), 0.15);
    --surface-info-strong: rgba(var(--color-primary-rgb), 0.25);
    --surface-success-soft: rgba(var(--color-success-rgb), 0.15);
    --surface-warning-soft: rgba(var(--color-warning-rgb), 0.15);
    --surface-danger-soft: rgba(var(--color-danger-rgb), 0.15);
    --surface-accent-soft: rgba(var(--color-accent-rgb), 0.12);

    --stroke-primary-soft: rgba(var(--color-primary-rgb), 0.3);
    --stroke-info-soft: rgba(var(--color-primary-rgb), 0.35);
    --stroke-success-soft: rgba(var(--color-success-rgb), 0.35);
    --stroke-warning-soft: rgba(var(--color-warning-rgb), 0.35);
    --stroke-danger-soft: rgba(var(--color-danger-rgb), 0.35);

    --color-success-on-soft: #6ee7b7;
    --color-warning-on-soft: #fcd34d;
    --color-danger-on-soft: #fca5a5;
    --color-info-on-soft: var(--color-primary-light);

    --chart-line: var(--color-primary);
    --chart-fill: rgba(var(--color-primary-rgb), 0.2);
    --chart-accent: var(--color-accent);

    --scrollbar-track: rgba(0, 0, 0, 0.3);
    --scrollbar-thumb: rgba(71, 85, 105, 0.6);
    --table-header-bg: rgba(var(--color-primary-rgb), 0.1);
    --table-row-alt: rgba(0, 0, 0, 0.15);
    --overlay-backdrop: rgba(0, 0, 0, 0.7);
    --code-surface: #020617;
    --code-text: #e2e8f0;
}