/* ==========================================================================
   PILI PIZZA - TOKENS
   Toutes les couleurs sont sourcees. Voir DESIGN-DIRECTION.md section 2.
   Les neutres sont construits en HSL a teinte 354, la teinte exacte du logo.
   ========================================================================== */

/* --- Polices auto-hebergees ----------------------------------------------
   Seul le sous-ensemble latin est declare : le contenu du site est en
   francais et aucun de ses caracteres ne sort de cette plage (verifie).
   Les fichiers latin-ext restent dans assets/fonts/ ; pour les reactiver,
   dupliquer les blocs ci-dessous avec l'unicode-range latin-ext.          */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Marque : preleve au pixel dans le fichier logo officiel ----------- */
  --brand-primary: #d70e22;         /* H354 S93 V84, 2,91 % des pixels du logo */
  --brand-primary-deep: #a80b1b;
  --brand-on-primary: #ffffff;

  /* --- Neutres teintes vers la marque (HSL h=354) ------------------------ */
  --surface-sunken: #0f0d0d;
  --surface: #181414;
  --surface-elevated: #221d1e;
  --surface-raised: #2e2829;
  --line: #3f3435;
  --line-strong: #766063;           /* 3,17:1 sur --surface, WCAG 1.4.11 */
  --ink-faint: #8d827c;             /* 4,89:1 */
  --ink-muted: #c4bdb5;             /* 9,83:1 */
  --ink: #f7f5f0;                   /* 16,78:1 */

  /* --- Surface papier : la carte imprimee reelle, photo 03 --------------- */
  --paper: #f5efdb;                 /* H46 S11 V96, mediane sur 83 592 px */
  --paper-2: #eee7d0;
  --paper-line: #d8cfb4;
  --paper-muted: #655c53;           /* 5,70:1 sur --paper */
  --paper-ink: #1c1516;             /* 15,66:1 sur --paper */

  /* --- Accents issus des photos ----------------------------------------- */
  --gold: #ba9e69;                  /* croute doree, photo 06. Interdit sur --paper */
  --eucalyptus: #819c96;            /* mur de la salle, photo 07 */

  /* --- Typographie ------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-display-xl: clamp(2.05rem, 4.4vw, 3.5rem);
  --fs-display-l: clamp(2.1rem, 5.2vw, 4rem);
  --fs-display-alt: clamp(1.8rem, 3.4vw, 2.6rem);
  --fs-display-m: clamp(1.45rem, 2.4vw, 2.05rem);
  --fs-display-s: clamp(1.2rem, 1.7vw, 1.45rem);
  --fs-body-l: clamp(1.0625rem, 1.35vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-mention: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-display: 1.04;
  --lh-title: 1.14;
  --lh-body: 1.65;
  --ls-eyebrow: 0.18em;             /* le reglage exact de l'arc du logo */
  --measure: 68ch;

  /* --- Espacement : echelle 4 / 8 px ------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(3.75rem, 6.5vw, 6.25rem);
  --section-y-tight: clamp(2.5rem, 4vw, 3.75rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 78rem;
  --maxw-narrow: 46rem;

  /* --- Rayons : un seul systeme -----------------------------------------
     Regles : boutons en pilule, surfaces a 14 px, mediums a 8 px.          */
  --r-pill: 999px;
  --r-lg: 14px;
  --r-md: 8px;
  --r-sm: 4px;

  /* --- Ombres teintees vers le fond, jamais du noir pur ------------------ */
  --sh-1: 0 1px 2px hsl(354 20% 3% / 0.4);
  --sh-2: 0 8px 24px -8px hsl(354 24% 3% / 0.6);
  --sh-3: 0 24px 60px -18px hsl(354 28% 2% / 0.75);

  /* --- Mouvement --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  /* --- Empilement -------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-header: 60;
  --z-overlay: 80;
  --z-modal: 100;

  --header-h: 68px;
  color-scheme: dark;
}

@media (min-width: 60rem) {
  :root { --header-h: 76px; }
}