/* ============================================================================
   Occasional Chef - jetons de design
   Variables racine : couleurs, typo, espacements, rayons, ombres, conteneurs.
   Palette chaude editoriale (magazine culinaire + outil pratique).
   ========================================================================== */

:root {
  /* --- Couleurs ------------------------------------------------------------ */
  --paper: #FBF7F0;          /* fond creme/papier */
  --surface: #FFFFFF;        /* cartes, blocs */
  --surface-sunk: #F4ECDD;   /* fond legerement creuse */
  --ink: #241B16;            /* texte principal, presque noir chaud */
  --ink-soft: #5B4A3A;       /* texte secondaire */
  --ink-faint: #8A7866;      /* legendes, meta */

  --terracotta: #C24E2C;     /* accent principal: liens, boutons, filet */
  --terracotta-dark: #A23C1E;/* survol */
  --terracotta-tint: #F6E4DB;/* fond doux terracotta */
  --mustard: #D8A23A;        /* accent secondaire chaud */
  --mustard-tint: #F7EAC9;
  --herb: #5B6E4A;           /* vert herbe: tags, categories */
  --herb-tint: #E7ECDF;

  --line: #E7DECF;           /* filets fins */
  --line-strong: #D8CBB4;

  --success: #4F7A3A;
  --warning: #B8791E;
  --danger: #B33A2B;

  /* Roles semantiques */
  --bg: var(--paper);
  --text: var(--ink);
  --link: var(--terracotta);
  --link-hover: var(--terracotta-dark);
  --focus-ring: #2D6FB0;

  /* --- Typographie -------------------------------------------------------- */
  --font-serif: "Fraunces", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Libre Franklin", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Echelle fluide (clamp) pour les titres */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.91rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.12rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.45vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.85vw, 1.95rem);
  --step-3:  clamp(1.80rem, 1.50rem + 1.50vw, 2.75rem);
  --step-4:  clamp(2.20rem, 1.70rem + 2.50vw, 3.75rem);
  --step-5:  clamp(2.70rem, 1.90rem + 4.00vw, 4.75rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.7;
  --tracking-eyebrow: 0.14em;

  /* Largeur de lecture confortable */
  --measure: 68ch;

  /* --- Espacements (echelle 4px) ----------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Rayons ------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Ombres (chaudes, discretes) --------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(36, 27, 22, 0.06);
  --shadow: 0 4px 14px rgba(36, 27, 22, 0.08);
  --shadow-lg: 0 18px 40px rgba(36, 27, 22, 0.12);

  /* --- Conteneurs -------------------------------------------------------- */
  --container: 72rem;        /* ~1152px, large editorial */
  --container-narrow: 46rem; /* corps d'article/recette */
  --container-wide: 84rem;

  /* --- Divers ------------------------------------------------------------ */
  --header-h: 4.25rem;
  --transition: 160ms ease;
}