/* ==========================================================================
   Tokens — Romane & Paul, 17 juillet 2027
   Deux couleurs, aucun dégradé. Le crème #FBF7EA est le fond du site ;
   le rouge #DC4430 ne sert qu'aux textes et aux éléments mis en avant.

   Note de lisibilité : #DC4430 sur #FBF7EA donne 4,1:1. C'est suffisant
   pour les grands titres (seuil 3:1), pas pour du texte courant (seuil
   4,5:1). Deux variantes plus sombres du même rouge existent donc :
     --accent-strong  surfaces pleines portant du texte blanc  (5,1:1)
     --accent-deep    petits textes et liens sur le crème      (6,1:1)
   La couleur perçue reste la même ; seule la lisibilité change.
   ========================================================================== */

:root {
  /* --- Toujours clair -------------------------------------------------------
     Nos couleurs sont toutes explicites, mais pas celles que dessine le
     navigateur : champs de saisie, listes déroulantes, curseur de texte,
     barres de défilement, voile des <dialog>. Sans cette ligne, un système en
     mode sombre les rend en sombre au milieu d'une page crème. Elle coupe
     aussi l'assombrissement automatique de Chrome sur Android, qui repeint
     d'autorité les sites n'ayant pas déclaré leur intention.
     ---------------------------------------------------------------------- */
  color-scheme: light;

  /* --- Les deux couleurs de la charte ------------------------------------ */
  --accent: #dc4430; /* couleur forte */
  /* Paper : le rouge et le vert ne bougent pas, seul le bleu descend de 242 à
     234. Le fond se réchauffe donc sans s'assombrir ni virer au beige. */
  --cream: #fbf7ea; /* couleur de fond (paper) */

  /* --- Variations, dérivées des deux précédentes ------------------------- */
  --accent-strong: #c93a28; /* aplats avec texte blanc */
  --accent-deep: #b0301f; /* petits textes, liens */
  --accent-hover: #e85340;
  --surface-1: #ffffff;
  --surface-2: #fdfaf3; /* réchauffé avec le fond, sinon les panneaux grisent */
  --white: #ffffff;
  --line-soft: #e8e1d5;

  /* --- Rôles sémantiques ------------------------------------------------- */
  --bg: var(--cream);
  --surface: var(--surface-1);
  --ink: #24201e; /* texte courant — 15:1 sur le crème */
  --ink-soft: #5a524e; /* texte secondaire — 7,2:1 */
  --on-accent: #ffffff; /* texte sur aplat rouge */
  --on-accent-soft: rgba(255, 255, 255, 0.86);
  --line: rgba(36, 32, 30, 0.12);
  --line-strong: rgba(36, 32, 30, 0.24);

  /* --- Verre --------------------------------------------------------------
     Sur un fond presque blanc, le verre ne peut pas éclaircir davantage :
     il se lit par son liseré, son ombre portée et ce qu'il floute.
     ---------------------------------------------------------------------- */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-panel: rgba(253, 250, 243, 0.92);
  --glass-blur: 20px;
  --glass-blur-panel: 30px;
  --glass-rim: rgba(255, 255, 255, 0.95);
  --glass-rim-low: rgba(255, 255, 255, 0.5);
  --glass-edge: rgba(220, 68, 48, 0.16);

  /* --- Typographie ------------------------------------------------------- */
  --font-display: "Parisienne", "Apple Chancery", cursive;
  --font-body: "Chivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;

  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --t-md: clamp(1.15rem, 1.08rem + 0.3vw, 1.35rem);
  --t-lg: clamp(1.45rem, 1.3rem + 0.7vw, 1.95rem);
  --t-xl: clamp(1.9rem, 1.6rem + 1.4vw, 2.9rem);
  --t-2xl: clamp(2.6rem, 1.9rem + 3vw, 4.4rem);
  --t-hero: clamp(3.2rem, 1.6rem + 6.4vw, 5.8rem);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.62;
  --measure: 64ch;

  /* --- Espace (échelle 4/8) ---------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --max-w: 74rem;

  /* --- Formes --------------------------------------------------------------
     Registre éditorial : angles quasi droits. Le cercle reste réservé aux
     deux boutons ronds (fermeture, sceau de confirmation).
     ---------------------------------------------------------------------- */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 6px;
  --r-pill: 999px;

  /* --- Ombres : rares, teintées rouge, jamais grises --------------------- */
  --shadow-soft: none;
  --shadow-lift: 0 1px 2px rgba(90, 26, 16, 0.06),
    0 18px 44px rgba(90, 26, 16, 0.12);
  --shadow-hero: 0 24px 70px rgba(90, 26, 16, 0.18);

  /* --- Mouvement --------------------------------------------------------- */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 460ms;

  /* --- Empilement -------------------------------------------------------- */
  --z-base: 0;
  --z-hero-media: 10;
  --z-hero-text: 20;
  --z-sticky: 40;
  --z-scrim: 80;
  --z-panel: 90;
  --z-toast: 120;
}