/* ===========================================
   Pichou.beer — Design tokens
   Direction visuelle « Blanc carmin »
   Seule source de vérité pour les couleurs, la
   typographie, les espacements et les durées.
   =========================================== */

:root {
    /* -------------------------------------------
       Couleurs
       Ratios de contraste WCAG 2.1 vérifiés ci-dessous.
       AA = 4,5:1 · AAA = 7:1 · composants non textuels = 3:1
       ------------------------------------------- */

    /* Surfaces claires
       --color-surface a un seul sens : panneau fonctionnel — formulaire,
       tableau de caractéristiques, note de dégustation, pastille
       d'ingrédient, remplissage de survol d'un bouton secondaire.
       Jamais une bande de section pleine largeur : les sections
       s'enchaînent sur --color-bg et se séparent par le rythme vertical.
       --color-surface / --color-bg = 1,25:1 */
    --color-bg: #FFFFFF;
    --color-surface: #E4E7E1;

    /* Texte sur surfaces claires
       --color-text       / --color-bg      = 18,53:1  AAA
       --color-text       / --color-surface = 14,84:1  AAA
       --color-text-muted / --color-bg      =  6,44:1  AA
       --color-text-muted / --color-surface =  5,15:1  AA */
    --color-text: #111413;
    --color-text-muted: #5A605C;

    /* Accent carmin, dérivé du rouge du logo
       --color-accent       / --color-bg           = 7,29:1  AAA
       --color-accent       / --color-surface      = 5,84:1  AA
       --color-on-accent    / --color-accent       = 7,29:1  AAA
       --color-accent-hover / --color-bg           = 9,44:1  AAA
       --color-on-accent    / --color-accent-hover = 9,44:1  AAA */
    --color-accent: #A81E27;
    --color-accent-hover: #8A1720;
    --color-on-accent: #FFFFFF;

    /* Bordures — chaque filet doit être vérifié contre les DEUX fonds sur
       lesquels il peut se poser, pas seulement contre le fond blanc.
       --color-border        / --color-bg      = 1,34:1
       --color-border        / --color-surface = 1,07:1
         → séparateur décoratif, uniquement sur fond blanc, jamais seul
           porteur d'information et jamais posé sur --color-surface.
       --color-border-strong / --color-bg      = 4,19:1
       --color-border-strong / --color-surface = 3,35:1
         → contours de champs de formulaire et de contrôles. Le seuil de
           3:1 (WCAG 1.4.11) est tenu sur les deux fonds, y compris pour les
           champs du formulaire de contact qui sont posés sur un panneau
           gris. */
    --color-border: #DCE0DA;
    --color-border-strong: #767E76;

    /* Surfaces sombres : pied de page, calques d'image
       --color-inverse-text  / --color-inverse-bg = 17,09:1  AAA
       --color-inverse-muted / --color-inverse-bg =  8,20:1  AAA
       L'accent carmin ne tient que 2,54:1 sur ce fond : sur surface sombre,
       les liens restent en --color-inverse-text et sont soulignés. */
    --color-inverse-bg: #111413;
    --color-inverse-text: #F5F6F4;
    --color-inverse-muted: #A8AEA9;

    /* Indicateur de focus clavier
       --color-focus         / --color-bg         = 18,53:1
       --color-focus         / --color-accent     =  2,54:1 — insuffisant
       --color-focus-inverse / --color-inverse-bg = 18,53:1
       --color-focus-inverse / --color-accent     =  7,29:1
       --focus-color est la couleur effectivement appliquée : elle vaut
       --color-focus par défaut et doit être redéfinie sur tout conteneur à
       fond sombre pour basculer sur --color-focus-inverse. */
    --color-focus: #111413;
    --color-focus-inverse: #FFFFFF;
    --focus-color: var(--color-focus);

    /* -------------------------------------------
       Typographie
       Échelle modulaire de raison 1,25 (tierce majeure),
       base 1rem = 16px. Les titres utilisent clamp()
       pour éviter les media queries de taille.
       ------------------------------------------- */
    --font-display: "Archivo", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: clamp(1.5rem, 1.32rem + 0.75vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.55rem + 1.35vw, 2.5rem);
    --text-4xl: clamp(2.25rem, 1.6rem + 2.7vw, 3.5rem);

    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.6;

    --tracking-tight: -0.02em;
    --tracking-wide: 0.08em;

    /* -------------------------------------------
       Espacement — échelle unique, base 4px
       ------------------------------------------- */
    --space-1: 0.25rem;   /* 4px  */
    --space-2: 0.5rem;    /* 8px  */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 2.5rem;    /* 40px */
    --space-8: 3rem;      /* 48px */
    --space-9: 4rem;      /* 64px */
    --space-10: 5rem;     /* 80px */
    --space-11: 6rem;     /* 96px */
    --space-12: 8rem;     /* 128px */

    /* -------------------------------------------
       Rayons, ombres, durées — trois valeurs chacun
       ------------------------------------------- */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-full: 999px;

    /* Une seule ombre : la direction est plate, l'élévation ne sert qu'aux
       objets superposés (bannière de consentement, modale d'âge). */
    --shadow-lg: 0 12px 32px rgb(17 20 19 / 0.16);

    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --ease-out: cubic-bezier(0.2, 0, 0, 1);

    /* -------------------------------------------
       Gabarit
       ------------------------------------------- */
    --container-max: 72rem;   /* 1152px */
    --container-pad: var(--space-5);
    --header-height: 5rem;
    --measure: 68ch;

    --focus-width: 2px;
    --focus-offset: 2px;
}