/* Variables CSS - Couleurs, espacements, etc. */

:root {
    /* Couleurs principales */
    --color-text: #191919;
    --color-cyan-clear: #A3E2FF;
    --color-green: #BFE3BA;
    --color-poppy: #F89797;
    --color-white: #FFFFFF;
    --color-background: #FFFFFF;

    /* Typographie */
    --font-family-primary: 'Outfit', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Tailles de police */
    --font-size-small: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-medium: 1.125rem; /* 18px */
    --font-size-large: 1.5rem; /* 24px */
    --font-size-xl: 2rem; /* 32px */
    --font-size-2xl: 3rem; /* 48px */
    --font-size-3xl: 4rem; /* 64px */

    /* Espacements */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 1rem; /* 16px */
    --spacing-md: 1.5rem; /* 24px */
    --spacing-lg: 2rem; /* 32px */
    --spacing-xl: 3rem; /* 48px */
    --spacing-2xl: 4rem; /* 64px */
    --spacing-3xl: 6rem; /* 96px */

    /* Border radius */
    --radius-sm: 0.25rem; /* 4px */
    --radius-md: 0.5rem; /* 8px */
    --radius-lg: 1rem; /* 16px */
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 200ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Container */
    --container-max-width: 1440px;
    --container-padding: var(--spacing-lg);
}

/* Responsive typography */
@media (max-width: 768px) {
    :root {
        --font-size-2xl: 2rem; /* 32px */
        --font-size-3xl: 2.5rem; /* 40px */
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
        --spacing-3xl: 4rem;
    }
}