/**
 * APERMIS — Design tokens (source : refonte/tokens-apermis.json · 2026-07-02)
 * Préfixe --ap-* (aucune collision avec WP/plugins).
 * Palette/typo VERROUILLÉES (design-system/DIRECTION_VISUELLE.md) + maquette accueil-v3 validée.
 *
 * DÉCISIONS DOCUMENTÉES :
 *  · --ap-muted = #6F6A5F (maquette v3) et NON #8A8676 (DIRECTION_VISUELLE) :
 *    contraste sur crème 4,8:1 (AA ✅) contre 3,25:1 (échec AA). #8A8676 reste
 *    dispo en --ap-muted-soft, décoratif uniquement.
 *  · Corail interdit en texte < 19px (2,85:1 sur crème). Sur fond corail :
 *    texte blanc ≥ 19px GRAS (3,2:1 = AA « texte large » seulement).
 *    Petit texte accentué → --ap-corail-text #B84624 (4,7:1 crème / 5,3:1 blanc, AA ✅).
 *  · Teal #1F9D8F = pictos/décor (2,97:1). Texte succès → --ap-success #14655B (6,1:1).
 *  · AUCUNE ombre sur cartes photo ; ombre légère seulement sur éléments flottants.
 */

:root {
  /* ── Couleurs ─────────────────────────────────────────────── */
  --ap-cream:       #F7F1E6;  /* fond page */
  --ap-white:       #FFFFFF;  /* surfaces / cartes */
  --ap-marine:      #143B5C;  /* primaire — 10,3:1 sur crème */
  --ap-marine-d:    #0E2B43;  /* hover primaire / fonds sombres */
  --ap-corail:      #F0633C;  /* accent / CTA uniquement */
  --ap-corail-d:    #D9532E;  /* hover CTA */
  --ap-corail-text: #B84624;  /* corail « texte » — 4,7:1 sur crème, 5,3:1 sur blanc (AA) */
  --ap-ink:         #20303F;  /* texte principal — 12:1 sur crème */
  --ap-muted:       #6F6A5F;  /* texte secondaire — 4,8:1 sur crème (AA) */
  --ap-muted-soft:  #8A8676;  /* gris chaud décoratif — JAMAIS en texte */
  --ap-sable:       #E7E0D2;  /* bordures légères (décoratives — pas pour les champs de formulaire) */
  --ap-teal:        #1F9D8F;  /* picto secondaire / décor — pas de texte */

  /* Texte sur fonds sombres (marine / marine-d) — ratios mesurés sur marine */
  --ap-on-dark:       #D7E1EC; /* 8,3:1 */
  --ap-on-dark-soft:  #B9C7D4; /* 6,4:1 (8,0:1 sur marine-d) */
  --ap-on-dark-faint: #9FB4C7; /* 5,1:1 (5,9:1 sur marine-d) — petits textes secondaires */
  --ap-corail-tint:   #FFC9A6; /* accent chaud sur fonds sombres UNIQUEMENT (7,4:1 sur marine) */

  /* Sémantiques (texte AA sur crème ET blanc) */
  --ap-success:     #14655B;
  --ap-success-bg:  #E2F0EC;
  --ap-warn:        #8A5A00;
  --ap-warn-bg:     #FBF0D9;
  --ap-error:       #B3261E;
  --ap-error-bg:    #FBE9E7;

  /* ── Typographie (WOFF2 auto-hébergées, cf. base.css) ─────── */
  --ap-serif: 'Playfair Display', Georgia, serif;           /* titres H1–H3 max, 600/700 */
  --ap-sans:  'Inter', -apple-system, 'Segoe UI', Arial, sans-serif; /* corps/UI, 400/600 */

  --ap-fs-h1:    clamp(2.25rem, 1.768rem + 2.143vw, 3.375rem); /* 36 → 54px */
  --ap-lh-h1:    1.08;
  --ap-fs-h2:    clamp(1.75rem, 1.482rem + 1.19vw, 2.375rem);  /* 28 → 38px */
  --ap-lh-h2:    1.1;
  --ap-fs-h3:    1.25rem;                                      /* 20px — sans/600 */
  --ap-lh-h3:    1.35;
  --ap-fs-quote: clamp(1.375rem, 1.24rem + 0.6vw, 1.6875rem);  /* 22 → 27px — serif/600 */
  --ap-lh-quote: 1.3;
  --ap-fs-lead:  clamp(1.125rem, 1.071rem + 0.238vw, 1.25rem); /* 18 → 20px */
  --ap-fs-body:  1rem;                                         /* 16px */
  --ap-lh-body:  1.6;   /* compromis référence (1.5) / maquette validée (1.65) */
  --ap-fs-small: 0.875rem;                                     /* 14px */
  --ap-fs-eyebrow: 0.8125rem;                                  /* 13px, 600, +1.5px, uppercase */

  /* ── Espacement (échelle 4pt) ─────────────────────────────── */
  --ap-s-1: 4px;  --ap-s-2: 8px;   --ap-s-3: 12px; --ap-s-4: 16px;
  --ap-s-6: 24px; --ap-s-8: 32px;  --ap-s-12: 48px; --ap-s-16: 64px; --ap-s-24: 96px;
  --ap-section-y: clamp(3rem, 2.14rem + 3.81vw, 5rem);         /* 48 → 80px */
  --ap-container: 1160px;
  --ap-gutter: 24px;
  --ap-header-h: 72px;
  /* Breakpoints (à utiliser en dur dans les media queries) : 640px / 960px / 1200px */

  /* ── Rayons ───────────────────────────────────────────────── */
  --ap-r-card:  16px;   /* cartes photo & offre */
  --ap-r-panel: 20px;   /* grands panneaux */
  --ap-r-btn:   999px;  /* boutons pill */
  --ap-r-field: 10px;   /* champs */

  /* ── Ombres (éléments flottants UNIQUEMENT) ───────────────── */
  --ap-shadow-float: 0 2px 14px rgba(20, 59, 92, 0.10);

  /* ── Focus clavier (toujours visible) ─────────────────────── */
  --ap-focus: var(--ap-marine); /* surchargé en blanc sur fonds sombres */
}