/* ==========================================================================
   DESIGN SYSTEM
   ========================================================================== */
:root {
    --content-large: 1280px;
    
    /* --- COLOR PALETTE --- */
    --color-white: #FAF9F6;
    --color-dark: #2C363A;
    --color-accent: #CFA635;
    --color-secondary: #2E250D;
    --color-surface: #EDF2F8;
    
    /* --- SETTING TYPE PARENT --- */
	--vui-body-px: 16; 
    --vui-ratio: 1.333;
    
	/* --- TAILLE DE BASE EN REM --- */
    --text-body: calc(var(--vui-body-px) * 1rem / 16); /* Convertit 16 en 1rem */

    /* --- CALCUL DU TYPESCALE (Résultats en REM) --- */
    --text-h6: calc(var(--text-body) * var(--vui-ratio));
    --text-h5: calc(var(--text-h6) * var(--vui-ratio));
    --text-h4: calc(var(--text-h5) * var(--vui-ratio));
    --text-h3: calc(var(--text-h4) * var(--vui-ratio));
    --text-h2: calc(var(--text-h3) * var(--vui-ratio));
    --text-h1: calc(var(--text-h2) * var(--vui-ratio));
    /* --- TAILLES INFÉRIEURES (Calcul direct) --- */
    --text-sm: calc(14 * 1rem / 16); /* Génère 0.875rem = 14px */
    --text-xs: calc(12 * 1rem / 16); /* Génère 0.75rem = 12px */

    /* --- LINE HEIGHTS --- */
    --text-h1-lh: 0.95; 
    --text-h2-lh: 1.1;
    --text-h3-lh: 1;
    --text-h4-lh: 1.2;
    --vui-body-lh: 1.4;

    /* --- LETTER SPACING --- */
    --text-h-letter-spacing: -0.25px;
    --text-body-letter-spacing: 0.25px;

/* ==========================================================================
       VUIDESIGN SPACING SYSTEM (4pt Grid)
       Base : 4px (0.25rem)
       ========================================================================== */    
    --sp-unit: 0.25rem;

    /* --- ÉCHELLE FINE (Incréments de 4px, jusqu'à 80px) --- */
    --sp4: calc(var(--sp-unit) * 1);
    --sp8: calc(var(--sp-unit) * 2);
    --sp12: calc(var(--sp-unit) * 3);
    --sp16: calc(var(--sp-unit) * 4);
    --sp20: calc(var(--sp-unit) * 5);
    --sp24: calc(var(--sp-unit) * 6);
    --sp28: calc(var(--sp-unit) * 7);
    --sp32: calc(var(--sp-unit) * 8);
    --sp36: calc(var(--sp-unit) * 9);
    --sp40: calc(var(--sp-unit) * 10);
    --sp44: calc(var(--sp-unit) * 11);
    --sp48: calc(var(--sp-unit) * 12);
    --sp52: calc(var(--sp-unit) * 13);
    --sp56: calc(var(--sp-unit) * 14);
    --sp60: calc(var(--sp-unit) * 15);
    --sp64: calc(var(--sp-unit) * 16);
    --sp68: calc(var(--sp-unit) * 17);
    --sp72: calc(var(--sp-unit) * 18);
    --sp76: calc(var(--sp-unit) * 19);
    --sp80: calc(var(--sp-unit) * 20);
    --sp112: calc(var(--sp-unit) * 28);

    /* --- ÉCHELLE global --- */
    --vui-gutter: var(--sp40);
    --vui-global: var(--sp64);
    --vui-section-large: var(--sp112);
    --vui-section-medium: var(--sp80);
    --vui-section-small: var(--sp48);
}
/* BREAKPOINT : TABLET */
@media (max-width: 1024px) {
    :root {
        --vui-ratio: 1.25; /* On réduit un peu l'écart */
        --text-h1-lh: 1.1; /* On redonne un peu d'air aux titres */
        --vui-gutter: var(--sp24);
        --vui-global: var(--sp20);
        --vui-section-large: var(--sp80);
        --vui-section-medium: var(--sp64);
        --vui-section-small: var(--sp40);       
    }
}

/* BREAKPOINT : MOBILE */
@media (max-width: 767px) {
    :root {
        --vui-ratio: 1.22; /* Ratio plus plat pour les petits écrans */
        --text-h1-lh: 1.15;

        --vui-gutter: var(--sp16);
        --vui-global: var(--sp16);
        --vui-section-large: var(--sp64);
        --vui-section-medium: var(--sp48);
        --vui-section-small: var(--sp32); 
    }
}