:root {

    /* =========================
       🎨 COLORS BASE
    ========================= */

    --color-surface: #0b1326;
    --color-surface-rgb: 11, 19, 38;

    --color-surface-container-lowest: #060e20;
    --color-surface-container-low: #131b2e;
    --color-surface-container: #171f33;
    --color-surface-container-high: #222a3d;
    --color-surface-container-highest: #2d3449;
    --color-surface-container-highest-rgb: 45, 52, 73;

    /* =========================
       🎯 PRIMARY
    ========================= */

    --color-primary-base: #2563eb;
    --color-primary-accent: #4f7cff;
    --color-primary-hover: #1d4ed8;
    --color-primary-accent-rgb: 79, 124, 255;

    --gradient-primary: linear-gradient(135deg, #2563eb, #4f7cff);
    --gradient-primary-hover: linear-gradient(135deg, #1d4ed8, #2563eb);

    --color-text-on-primary: #ffffff;

    /* =========================
       🎨 STATUS
    ========================= */

    --color-tertiary-success: #4ae176;
    --color-error-critical: #ef4444;
    --color-warning-maintenance: #f59e0b;

    /* =========================
       📝 TEXT
    ========================= */

    --color-text-main: #f8fafc;
    --color-text-secondary: #c3c6d7;
    --color-text-muted: #8b90a0;
    --color-text-on-surface-variant: #94a3b8;

    /* =========================
       🧱 BORDERS
    ========================= */

    --color-outline-variant: 148, 163, 184;
    --color-outline-variant-rgb: 148, 163, 184;

    /* =========================
       📐 SPACING
    ========================= */

    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* =========================
       🔘 RADIUS
    ========================= */

    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    /* =========================
       🔤 TYPOGRAPHY
    ========================= */

    --font-body-md-size: 14px;
    --font-body-md-weight: 400;

    --font-label-sm-size: 12px;
    --font-label-sm-weight: 500;
    --font-label-sm-text-transform: uppercase;

    --font-title-md-size: 16px;
    --font-title-md-weight: 600;

    --font-headline-sm-size: 20px;

    --font-display-lg-size: 28px;
    --font-display-lg-weight: 700;

    /* =========================
       🌫️ SHADOWS
    ========================= */

    --shadow-sm: 0 2px 6px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-ambient: 0 10px 30px rgba(0,0,0,0.4);

    /* =========================
       ⚡ TRANSITIONS
    ========================= */

    --transition-speed: 200ms;
    --transition-timing-bezier: cubic-bezier(0.4, 0, 0.2, 1);

    /* =========================
       🔮 GLASS
    ========================= */

    --glass-blur: 12px;

    /* =========================
       📊 Z-INDEX
    ========================= */

    --z-index-dropdown: 1000;
    --z-index-modal: 2000;

}