/* ===================================================
   VARIABLES CSS CENTRALISEES
   =================================================== */

:root {
    /* ---------------------------------------------------
COULEURS
--------------------------------------------------- */

    /* Palette principale */
    --color-white: #fefcfa;
    --color-black: #1a1a1a;
    --color-primary: #4caf50;
    --color-primary-light: #81c784;
    --color-primary-dark: #388e3c;
    --color-secondary: #ff7043;
    --color-accent: #4fc3f7;

    /* Nuances de gris */
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #eeeeee;
    --color-gray-300: #e0e0e0;
    --color-gray-400: #bdbdbd;
    --color-gray-500: #9e9e9e;
    --color-gray-600: #757575;
    --color-gray-700: #616161;
    --color-gray-800: #424242;
    --color-gray-900: #212121;

    /* Couleurs sémantiques */
    --color-background: var(--color-white);
    --color-text: var(--color-black);
    --color-text-secondary: var(--color-gray-700);
    --color-border: var(--color-gray-300);
    --color-border-light: var(--color-gray-200);
    --color-success: var(--color-primary);
    --color-warning: var(--color-secondary);
    --color-info: var(--color-accent);

    /* ---------------------------------------------------
TYPOGRAPHIE
--------------------------------------------------- */

    /* Familles de polices */
    --font-display:
        "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --font-body: "Lora", Georgia, Cambria, "Times New Roman", serif;

    /* Tailles de police (fluides) */
    --font-size-xs: clamp(0.75rem, 0.15vw + 0.71rem, 0.88rem);
    --font-size-sm: clamp(0.88rem, 0.25vw + 0.81rem, 1rem);
    --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.13rem);
    --font-size-lg: clamp(1.13rem, 0.45vw + 1.01rem, 1.25rem);
    --font-size-xl: clamp(1.25rem, 0.67vw + 1.08rem, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1vw + 1.25rem, 2rem);
    --font-size-3xl: clamp(1.75rem, 1.5vw + 1.38rem, 2.5rem);
    --font-size-4xl: clamp(2rem, 2.25vw + 1.44rem, 3rem);
    --font-size-5xl: clamp(2.5rem, 3vw + 1.75rem, 4rem);

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

    /* Hauteur de ligne */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    /* ---------------------------------------------------
ESPACEMENTS
--------------------------------------------------- */

    /* Échelle modulaire (basée sur 1rem = 16px) */
    --spacing-3xs: 0.125rem; /* 2px */
    --spacing-2xs: 0.25rem; /* 4px */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 0.75rem; /* 12px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */
    --spacing-2xl: 3rem; /* 48px */
    --spacing-3xl: 4rem; /* 64px */
    --spacing-4xl: 6rem; /* 96px */
    --spacing-5xl: 8rem; /* 128px */

    /* Conteneurs */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-md);

    /* ---------------------------------------------------
BORDURES & RAYONS
--------------------------------------------------- */

    --border-width-thin: 1px;
    --border-width-thick: 2px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-full: 9999px;

    /* Ombres */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:
        0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg:
        0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* ---------------------------------------------------
BREAKPOINTS
--------------------------------------------------- */

    --breakpoint-xs: 480px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* ---------------------------------------------------
TRANSITIONS
--------------------------------------------------- */

    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* ---------------------------------------------------
Z-INDEX
--------------------------------------------------- */

    --z-negative: -1;
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-header: 1000;
    --z-overlay: 1050;
    --z-modal: 1100;
}

/* Variantes pour dark mode (à implémenter plus tard si nécessaire) */
[data-theme="dark"] {
    --color-background: #121212;
    --color-text: #ffffff;
    --color-text-secondary: #b0b0b0;
    --color-border: #333333;
    --color-border-light: #222222;
}