:root {
    /* Colors — surfaces */
    --color-bg: #141820;
    --color-bg-secondary: #181e28;
    --color-bg-elevated: #1c2430;
    --color-card: #1c2532;
    --color-card-hover: #232e3d;

    /* Colors — brand & text */
    --color-accent: #66C0F4;
    --color-accent-hover: #8FD3FF;
    --color-accent-muted: rgba(102, 192, 244, 0.1);
    --color-text: #F4F7FA;
    --color-text-secondary: #C4D2DE;
    --color-text-muted: #8496AB;

    /* Colors — borders & glass */
    --color-border: rgba(255, 255, 255, 0.065);
    --color-border-subtle: rgba(255, 255, 255, 0.038);
    --color-border-highlight: rgba(255, 255, 255, 0.11);
    --color-glass: rgba(20, 26, 36, 0.55);
    --color-glass-light: rgba(255, 255, 255, 0.028);

    /* Colors — semantic */
    --color-success: #7ee787;
    --color-warning: #f0b429;

    /* Effects */
    --glass-blur: 20px;
    --glass-blur-soft: 14px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Radius */
    --radius: 18px;
    --radius-sm: 12px;
    --radius-xs: 8px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.09);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.11), 0 10px 28px rgba(0, 0, 0, 0.14);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.13), 0 18px 42px rgba(0, 0, 0, 0.18);
    --shadow-glow: 0 0 0 1px rgba(102, 192, 244, 0.07), 0 6px 20px rgba(102, 192, 244, 0.08);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --transition: 0.38s var(--ease-out);
    --transition-fast: 0.22s var(--ease-out);

    /* Typography */
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --tracking-tight: -0.02em;
    --tracking-wide: 0.06em;

    /* Layout */
    --header-height: 72px;
    --sidebar-left-width: 220px;
    --sidebar-right-width: 280px;
}