/**
 * B612 NEXT — Design tokens
 * Fichier central des variables graphiques de la nouvelle interface.
 *
 * IMPORTANT :
 * - Toutes les variables sont limitées à .b612-next.
 * - Ne pas déplacer ce bloc vers :root.
 * - Les valeurs de marque viennent de la charte graphique B612 2026.
 * - Les couleurs neutres et les dimensions sont des valeurs de départ,
 *   à ajuster pendant la mise au point des maquettes.
 */

.b612-next {
    /* =========================================================
       TYPOGRAPHIES — polices locales déclarées dans b612-fonts.css
       ========================================================= */
    --b612-next-font-heading: "Formiga", sans-serif;
    --b612-next-font-body: "Filson Pro", sans-serif;

    --b612-next-font-weight-regular: 400;
    --b612-next-font-weight-medium: 500;
    --b612-next-font-weight-semibold: 600;
    --b612-next-font-weight-bold: 700;
    --b612-next-font-weight-black: 900;

    --b612-next-text-xs: 0.75rem;
    --b612-next-text-sm: 0.875rem;
    --b612-next-text-base: 1rem;
    --b612-next-text-lg: 1.125rem;
    --b612-next-text-xl: 1.375rem;
    --b612-next-text-2xl: 1.75rem;
    --b612-next-text-3xl: 2.25rem;
    --b612-next-text-display: clamp(2.5rem, 5vw, 4.75rem);

    --b612-next-line-body: 1.6;
    --b612-next-line-heading: 1.08;

    /* =========================================================
       COULEURS DE MARQUE — charte graphique B612 2026
       ========================================================= */
    --b612-next-color-primary: #28367f;
    --b612-next-color-secondary: #36b2c2;

    /* Couleurs tertiaires associées aux tranches d'âge */
    --b612-next-color-age-toddlers: #ed6c84;
    --b612-next-color-age-children: #3ca648;
    --b612-next-color-age-youth: #964c7f;
    --b612-next-color-age-adults: #e84242;
    --b612-next-color-age-seniors: #df7a0d;
    --b612-next-color-age-all: #ffd618;

    /* Couleurs de surface et de texte — base de travail */
    --b612-next-color-background: #fcf8e3;
    --b612-next-color-surface: #ffffff;
    --b612-next-color-text: #25283a;
    --b612-next-color-text-muted: #626577;
    --b612-next-color-border: rgb(40 54 127 / 16%);
    --b612-next-color-primary-soft: rgb(40 54 127 / 8%);
    --b612-next-color-secondary-soft: rgb(54 178 194 / 14%);
    --b612-next-color-focus: #28367f;

    /* États fonctionnels */
    --b612-next-color-success: #267a45;
    --b612-next-color-warning: #8a5100;
    --b612-next-color-danger: #b42318;
    --b612-next-color-disabled: #777b88;

    /* =========================================================
       ESPACEMENTS
       ========================================================= */
    --b612-next-space-1: 0.25rem;
    --b612-next-space-2: 0.5rem;
    --b612-next-space-3: 0.75rem;
    --b612-next-space-4: 1rem;
    --b612-next-space-5: 1.5rem;
    --b612-next-space-6: 2rem;
    --b612-next-space-7: 3rem;
    --b612-next-space-8: 4rem;
    --b612-next-section-gap: clamp(3rem, 6vw, 6rem);

    /* =========================================================
       GÉOMÉTRIE ET EFFETS
       ========================================================= */
    --b612-next-content-width: 1280px;
    --b612-next-reading-width: 760px;
    --b612-next-page-gutter: clamp(1rem, 4vw, 3.5rem);

    --b612-next-radius-sm: 0.375rem;
    --b612-next-radius-md: 0.75rem;
    --b612-next-radius-lg: 1.25rem;
    --b612-next-radius-pill: 999px;

    --b612-next-border-width: 1px;
    --b612-next-shadow-card: 0 8px 28px rgb(25 34 70 / 8%);
    --b612-next-shadow-floating: 0 16px 40px rgb(25 34 70 / 14%);

    /* =========================================================
       TRANSITIONS ET RESPONSIVE
       ========================================================= */
    --b612-next-transition-fast: 160ms ease;
    --b612-next-transition-base: 240ms ease;

    --b612-next-breakpoint-tablet: 768px;
    --b612-next-breakpoint-desktop: 1100px;

    color: var(--b612-next-color-text);
    font-family: var(--b612-next-font-body);
    font-size: var(--b612-next-text-base);
    line-height: var(--b612-next-line-body);
}

/* Exemple d'utilisation des tokens sur des composants Next.
   Ces règles n'affectent que les éléments de .b612-next. */
.b612-next :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--b612-next-font-heading);
    line-height: var(--b612-next-line-heading);
}

.b612-next a:focus-visible,
.b612-next button:focus-visible,
.b612-next input:focus-visible,
.b612-next select:focus-visible,
.b612-next textarea:focus-visible {
    outline: 3px solid var(--b612-next-color-focus);
    outline-offset: 3px;
}