:root {
    /* =========================================
       COLORS
    ========================================= */

    --color-primary: #0F5AFF;
    --color-primary-light: #3D7BFF;

    --color-background: #f7f7f7;
    --color-surface: #ffffff;

    --color-text: #10203A;
    --color-text-secondary: #52627A;
    --color-text-muted: #8390A5;

    --color-border: #DCE6F5;

    --color-success: #168A63;
    --color-danger: #dc3545;
    --color-warning: #f59e0b;


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

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;


    /* =========================================
       BORDER RADIUS
    ========================================= */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 999px;


    /* =========================================
       SHADOWS
    ========================================= */

    --shadow-sm:
        0 2px 8px rgba(15, 90, 255, 0.08);

    --shadow-md:
        0 4px 20px rgba(15, 90, 255, 0.10);

    --shadow-lg:
        0 8px 30px rgba(15, 90, 255, 0.14);


    /* =========================================
       LAYOUT
    ========================================= */

    --mobile-content-padding: 16px;

    --bottom-nav-height: 64px;

    --header-height: 48px;


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

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;
}