:root {

    /* ==========================
       COULEURS
    ========================== */

    --color-primary: #7270AC;
    --color-secondary: #80C5CF;

    --color-background: #F8F7F8;
    --color-surface: #FFFFFF;

    --color-text: #202124;
    --color-text-soft: #6B7280;

    /* ==========================
       ESPACEMENTS
    ========================== */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;

    /* ==========================
       RAYONS
    ========================== */

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --radius-circle: 50%;

    /* ==========================
       OMBRES
    ========================== */

    --shadow-soft: 0 8px 24px rgba(0,0,0,.05);
    --shadow-medium: 0 12px 32px rgba(0,0,0,.08);
    --shadow-hero: 0 20px 60px rgba(0,0,0,.12);

}