/* Jetons de design Cubik Cloud — miroir de theme.json (docs/03 § Plan de design retenu).
   Les valeurs de couleur vivent dans theme.json ; ici on nomme les rôles et on fixe échelle, rayons, mouvement. */
:root {
  /* Couleurs (rôles) */
  --cubik-marine: var(--wp--preset--color--marine, #0B4A7C);
  --cubik-bleu: var(--wp--preset--color--bleu, #2C7BC2);
  --cubik-bleu-lien: var(--wp--preset--color--bleu-lien, #276FB0);
  --cubik-ciel: var(--wp--preset--color--ciel, #E9F1F8);
  --cubik-encre: var(--wp--preset--color--encre, #1F2933);
  --cubik-ardoise: var(--wp--preset--color--ardoise, #5B6B7A);
  --cubik-filet: var(--wp--preset--color--filet, #D6DFE7);
  --cubik-bordure-controle: #7C8C9B; /* 3,45:1 sur blanc — champs, cartes-radio */
  --cubik-vert: var(--wp--preset--color--vert, #1E7A4C);
  --cubik-ambre: var(--wp--preset--color--ambre, #B7791F);
  --cubik-ambre-fond: var(--wp--preset--color--ambre-fond, #FBF3E4);
  --cubik-ambre-texte: var(--wp--preset--color--ambre-texte, #7A4F0E);
  --cubik-blanc: var(--wp--preset--color--blanc, #FFFFFF);
  --cubik-marine-fonce: #083A62; /* survol du primaire sur fond marine ; pied de page */
  --cubik-erreur: #B42318;
  --cubik-erreur-fond: #FDECEA;

  /* Typographie */
  --cubik-police-corps: var(--wp--preset--font-family--lato, Lato, 'Segoe UI', Helvetica, Arial, sans-serif);
  --cubik-police-titres: var(--wp--preset--font-family--familjen, 'Familjen Grotesk', Lato, sans-serif);
  --cubik-taille-petit: var(--wp--preset--font-size--petit, 0.9375rem);
  --cubik-taille-base: 1rem;
  --cubik-taille-lecture: var(--wp--preset--font-size--lecture, 1.125rem);
  --cubik-taille-intro: var(--wp--preset--font-size--intro, 1.25rem);
  --cubik-taille-h4: var(--wp--preset--font-size--titre-4, 1.5rem);
  --cubik-taille-h3: var(--wp--preset--font-size--titre-3, 2rem);
  --cubik-taille-h2: var(--wp--preset--font-size--titre-2, 2.5rem);
  --cubik-taille-h1: var(--wp--preset--font-size--titre-1, 3.5rem);
  --cubik-taille-prix: clamp(2.125rem, 1.5rem + 2vw, 3rem);
  --cubik-interligne: 1.55;
  --cubik-mesure: 60ch; /* ≈ 70 caractères en Lato (le « 0 » de Lato est large) */

  /* Espacement */
  --cubik-esp-1: 0.25rem;
  --cubik-esp-2: 0.5rem;
  --cubik-esp-3: 1rem;
  --cubik-esp-4: 1.5rem;
  --cubik-esp-5: 2.5rem;
  --cubik-esp-6: clamp(3.5rem, 6vw, 4.5rem);
  --cubik-esp-7: clamp(4rem, 8vw, 6rem);
  --cubik-gouttiere: 1.5rem;
  --cubik-marge-page: clamp(1.25rem, 4vw, 2.5rem);
  --cubik-contenu: 75rem;
  --cubik-large: 84rem;

  /* Rayons — un pour les contrôles, un pour les surfaces */
  --cubik-rayon-controle: 6px;
  --cubik-rayon-surface: 4px;

  /* Contrôles */
  --cubik-hauteur-controle: 3rem; /* 48 px */
  --cubik-focus: 0 0 0 3px var(--cubik-blanc), 0 0 0 5px var(--cubik-bleu);

  /* Mouvement : réponses aux actions seulement */
  --cubik-duree-courte: 150ms;
  --cubik-duree: 200ms;
  --cubik-duree-longue: 250ms;
  --cubik-courbe: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cubik-duree-courte: 0ms;
    --cubik-duree: 0ms;
    --cubik-duree-longue: 0ms;
  }
}