/* ============================================================
   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 */

  /* ---------- Couleurs de marque des réseaux ----------
     Elles n'appartiennent pas à la palette du site : ce sont les couleurs
     officielles des plateformes, et elles ne servent qu'au survol des icônes
     du pied de page. Elles vivent ici quand même, parce que la règle du
     dépôt est qu'aucun hexadécimal ne s'écrit ailleurs.
     Le jaune Snapchat ne porte pas de blanc (1.1:1) : le logo passe en
     encre foncée sur ce fond, d'où la seconde variable. */
  --color-social-instagram: #c13584;
  --color-social-tiktok: #010101;
  --color-social-snapchat: #fffc00;
  --color-social-snapchat-ink: #24140e;
  --color-social-facebook: #0866ff;
  --color-primary-border: rgba(207, 52, 24, 0.28);
  --color-primary-ghost: rgba(207, 52, 24, 0.06);  /* filigrane décoratif,
                                     jamais derrière du texte à lire */

  --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;

  /* Chiffres et chemins techniques rendus tels qu'ils s'écrivent : la
     trace serveur du 404, et tout ce qui doit s'aligner colonne par
     colonne. Le back-office portait déjà sa propre pile, hors tokens. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* É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;
  }
}