/*
=========================================================
LADA DESIGN SYSTEM
---------------------------------------------------------
Design Tokens
=========================================================
*/

:root {

    /*
    =====================================================
    Colors
    =====================================================
    */

    --color-primary: #6EC6FF;
    --color-primary-hover: #4DB5F7;
    --color-primary-light: #EAF8FF;

    /* Accessible foreground variants for text/icons on light surfaces. */
    --color-primary-strong: #1877AE;
    --color-secondary-strong: #447A50;
    --color-warning-strong: #996000;

    --color-secondary: #9AD69D;

    --color-accent: #FF8A65;
    --color-warning: #FFD166;

    --color-background: #FFFFFF;
    --color-background-alt: #F7FCFF;

    --color-text: #2D3748;
    --color-text-light: #5B6675;

    --color-border: #DCE7EF;

    /*
    =====================================================
    Typography
    =====================================================
    */

    --font-family:
        "Segoe UI",
        "Inter",
        "Roboto",
        sans-serif;

    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.9375rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.625rem;
    --font-size-2xl: 2.125rem;
    --font-size-3xl: 3.125rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /*
    =====================================================
    Spacing
    =====================================================
    */

    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 5rem;

    /*
    =====================================================
    Radius
    =====================================================
    */

    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-round: 9999px;

    /*
    =====================================================
    Shadows
    =====================================================
    */

    --shadow-sm:
        0 2px 8px rgba(0, 0, 0, .05);

    --shadow-md:
        0 8px 20px rgba(0, 0, 0, .08);

    --shadow-lg:
        0 20px 40px rgba(0, 0, 0, .10);

    /*
    =====================================================
    Animation
    =====================================================
    */

    --transition-fast: .2s ease;
    --transition-normal: .3s ease;
    --transition-slow: .5s ease;

    /*
    =====================================================
    Layout
    =====================================================
    */

    --container-width: 1320px;

    --header-height: 90px;

}