/* ============================================================
   Kabana Pizz — Design tokens
   ============================================================
   Source unique des couleurs, échelles et rythmes du produit.
   Aucune valeur brute (#hex, px d'espacement) ne doit être écrite
   ailleurs : si une valeur manque ici, on l'ajoute ici.

   Contraste : chaque couleur de texte est annotée de son ratio
   mesuré sur --color-bg. Le seuil retenu est WCAG 2.2 AA, soit
   4.5:1 pour le texte courant et 3:1 pour les éléments non
   textuels (bordures d'état, icônes porteuses de sens).
   ============================================================ */

:root {

  /* ---------- Couleurs de fond ---------- */

  --color-bg: #fffdf8;            /* papier, fond de page */
  --color-bg-warm: #fff5e8;       /* aplat chaud, sections alternées */
  --color-surface: #ffffff;       /* cartes, panneaux, modales */
  --color-surface-sunken: #fbf5ec;/* champs, pistes de sélecteur */
  --color-overlay: rgba(36, 20, 14, 0.5);

  /* ---------- Couleurs de texte ---------- */

  --color-text: #24140e;          /* 17.49:1 — titres et texte principal */
  --color-text-muted: #6b5449;    /*  6.91:1 — descriptions, métadonnées */
  --color-text-subtle: #7d6558;   /*  5.34:1 — mentions discrètes, hints */
  --color-text-invert: #ffffff;

  /* ---------- Marque et actions ---------- */

  /* Le rouge historique (#e83f27) plafonnait à 4.06:1 avec du texte
     blanc : le bouton principal du site échouait au contraste. Cette
     version assombrie garde l'identité et passe AA dans les deux sens
     (5.05:1 en fond, 4.97:1 en texte sur papier). */
  --color-primary: #cf3418;
  --color-primary-hover: #b32810;
  --color-primary-active: #9b220d;
  --color-primary-soft: #fdeae5;  /* aplat de teinte, fonds de badge */
  --color-primary-border: rgba(207, 52, 24, 0.28);

  --color-accent: #ffbc32;        /* fromage — décor et surlignage seulement,
                                     jamais en couleur de texte */

  /* ---------- États sémantiques ---------- */

  --color-success: #116b40;       /* 6.45:1 */
  --color-success-soft: #e4f3ea;
  --color-warning: #8a5200;       /* 6.28:1 */
  --color-warning-soft: #fdf0d8;
  --color-danger: #b32810;        /* 6.40:1 */
  --color-danger-soft: #fdeae7;
  --color-info: #1f5d8c;          /* 6.09:1 */
  --color-info-soft: #e6f0f8;

  /* ---------- Traits ---------- */

  --color-border: #e8ddd0;
  --color-border-strong: #d2c0ad;
  --color-focus: #0d5aa8;         /* bleu franc : lisible sur papier comme
                                     sur les aplats rouges et verts */

  /* ---------- Typographie ---------- */

  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Échelle typographique. Le plancher est 0.8125rem (13px) : la carte
     produit descendait à 8.96px, illisible sur le device prioritaire. */
  --text-xs: 0.8125rem;   /* 13px — métadonnées, unités */
  --text-sm: 0.875rem;    /* 14px — descriptions produit */
  --text-base: 1rem;      /* 16px — texte courant, champs de saisie */
  --text-lg: 1.125rem;    /* 18px — titres de carte */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px — titres de section */
  --text-3xl: 2.25rem;    /* 36px — titre de page */
  --text-4xl: 2.75rem;    /* 44px — hero desktop */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---------- Espacement (base 4px) ---------- */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------- Rayons ---------- */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---------- Ombres ---------- */

  /* Volontairement légères : le brief proscrit les ombres lourdes.
     Elles servent à décoller, pas à décorer. */
  --shadow-xs: 0 1px 2px rgba(60, 32, 18, 0.06);
  --shadow-sm: 0 2px 6px rgba(60, 32, 18, 0.07);
  --shadow-md: 0 6px 18px rgba(60, 32, 18, 0.09);
  --shadow-lg: 0 14px 36px rgba(60, 32, 18, 0.13);

  /* ---------- Zones tactiles et contrôles ---------- */

  /* WCAG 2.2 — 2.5.8 Target Size (Minimum) exige 24px. On tient 44px,
     seuil confortable au pouce et recommandation AAA (2.5.5). */
  --tap-min: 44px;
  --control-height: 48px;
  --control-height-sm: 38px;

  /* ---------- Mouvement ---------- */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ---------- Gabarit ---------- */

  --content-max: 1180px;   /* largeur maximale des grilles */
  --prose-max: 68ch;       /* longueur de ligne confortable en lecture */
  --page-gutter: var(--space-4);

  /* ---------- Empilement ---------- */

  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 200;
  --z-drawer: 210;
  --z-toast: 300;
  --z-modal: 400;
}

@media (min-width: 768px) {
  :root { --page-gutter: var(--space-6); }
}

@media (min-width: 1024px) {
  :root { --page-gutter: var(--space-8); }
}

/* Le mouvement décoratif est neutralisé à la source : les durées
   passent à zéro, donc toute transition écrite avec ces tokens est
   désactivée sans avoir à la lister une par une. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
}