:root {
    /* Font stacks (remplace Inter si tu as une font ONDIF) */
    --font-roboto: "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-brandon: 'Brandon Text',
                system-ui,
                -apple-system,
                "Segoe UI",
                Roboto,
                Arial,
                sans-serif;
    --font-barlow: 'Barlow',
            system-ui,
            -apple-system,
            "Segoe UI",
            Roboto,
            Arial,
            sans-serif;

    /* Font weights */
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    /* Optical size (opsz) : utile avec Roboto Flex */
    --opsz-body: 14;
    --opsz-title: 28;

    /* Line heights */
    --lh-tight: 1.15;
    --lh-snug: 1.25;
    --lh-base: 1.3;

    /* Letter spacing (optionnel mais utile) */
    --ls-tight: -0.01em;
    --ls-normal: 0;
    --ls-wide: 0.02em;

    /* Scale (mobile-first) */
    --fs-12: 0.75rem;   /* 12 */
    --fs-14: 0.875rem;  /* 14 */
    --fs-16: 1rem;      /* 16 */
    --fs-17: 1.0625rem;      /* 17 */
    --fs-18: 1.125rem;  /* 18 */
    --fs-20: 1.25rem;   /* 20 */
    --fs-23: 1.4375rem;   /* 23 */
    --fs-24: 1.5rem;    /* 24 */
    --fs-28: 1.75rem;   /* 28 */
    --fs-30: 1.875rem;   /* 30 */
    --fs-32: 2rem;      /* 32 */
    --fs-40: 2.5rem;    /* 40 */

    /* Semantic mapping (ça c’est ton “API” DS) */
    --text-xs: var(--fs-12);
    --text-sm: var(--fs-14);
    --text-md: var(--fs-16);
    --text-lg: var(--fs-18);

    --title-xs: var(--fs-16);
    --title-xs2: var(--fs-17);
    --title-sm: var(--fs-18);
    --title-md: var(--fs-20);
    --title-md2: var(--fs-23);
    --title-lg: var(--fs-24);
    --title-lg2: var(--fs-30);
    --title-xl: var(--fs-32);
    --title-2xl: var(--fs-40);
}

/* Option : ajustements desktop */
@media (max-width: 700px) {
    :root {
        --title-xs: var(--fs-12);
        --title-xs2: var(--fs-14);
        --title-sm: var(--fs-14);
        --title-md: var(--fs-16);
        --title-md2: var(--fs-17);
        --title-lg: var(--fs-18);
        --title-lg2: var(--fs-20);
        --title-xl: var(--fs-20);
        --title-2xl: var(--fs-24);
    }
}
@media (min-width: 700px) {
    :root {
        --title-xs: var(--fs-14);
        --title-xs2: var(--fs-16);
        --title-sm: var(--fs-16);
        --title-md: var(--fs-18);
        --title-md2: var(--fs-20);
        --title-lg: var(--fs-20);
        --title-lg2: var(--fs-24);
        --title-xl: var(--fs-24);
        --title-2xl: var(--fs-32);
    }
}
@media (min-width: 1024px) {
    :root {
        --title-xs: var(--fs-16);
        --title-xs2: var(--fs-17);
        --title-sm: var(--fs-18);
        --title-md: var(--fs-20);
        --title-md2: var(--fs-23);
        --title-lg: var(--fs-24);
        --title-lg2: var(--fs-30);
        --title-xl: var(--fs-32);
        --title-2xl: var(--fs-40);
    }
}