/*
  DESIGN TOKENS — Mag'Dalle
  ---------------------------------------------------------------
  This is the ONE file that carries the brand's identity.
  A future client with a different identity, palette, type and
  composition should only need a new tokens.css + new copy in
  index.html — layout.css / components.css / animations.css stay
  generic and untouched. That is the reusable part of the process;
  everything in this file is what makes THIS site Mag'Dalle.
*/

:root {
  /* ---- Brand palette -------------------------------------------------
     Grill char + paprika + parchment + a warm mustard highlight.
     Built from Mag'Dalle's real concept (tacos/kebab/burger street
     food, homemade tiramisu, generous portions) rather than a
     generic red/green "restaurant" palette. */
  --ink: #1c1410;              /* grill char — near-black, warm */
  --ink-soft: #3a2c24;
  --ink-60: rgba(28, 20, 16, 0.66);
  --ink-35: rgba(28, 20, 16, 0.35);
  --ink-12: rgba(28, 20, 16, 0.12);

  --cream: #fbf3e6;            /* parchment / paper bag */
  --cream-dim: #f1e3cb;
  --cream-line: rgba(251, 243, 230, 0.14);

  --paprika: #e2531c;          /* signature accent — spice, grill, sauce */
  --paprika-deep: #a83c14;
  --paprika-rgb: 226, 83, 28;

  --mustard: #e8ab3d;          /* homemade warmth — tiramisu, fries, gold */
  --mustard-rgb: 232, 171, 61;

  --surface: var(--cream);
  --surface-alt: var(--cream-dim);
  --ink-text: var(--ink);

  /* ---- Typography ------------------------------------------------
     Display: Bricolage Grotesque — bold, a little irreverent, built
     for big confident headlines (street-signage energy, not a
     bistro serif cliché).
     Body: Instrument Sans — clean humanist workhorse for legibility. */
  --font-display: "Bricolage Grotesque", "Archivo Black", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Inter", system-ui, sans-serif;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.14em;

  /* Fluid type scale */
  --fs-hero: clamp(3.2rem, 5vw + 2.2rem, 8.5rem);
  --fs-h1: clamp(2.4rem, 2.2vw + 1.7rem, 4.2rem);
  --fs-h2: clamp(1.8rem, 1.4vw + 1.4rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 0.6vw + 1.1rem, 1.6rem);
  --fs-lead: clamp(1.1rem, 0.4vw + 1rem, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ---- Spacing / rhythm ------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: clamp(3rem, 4vw, 5.5rem);
  --space-xl: clamp(5rem, 8vw, 9rem);
  --space-2xl: clamp(7rem, 12vw, 13rem);

  --container: 78rem;
  --container-narrow: 46rem;
  --edge: clamp(1.25rem, 5vw, 4rem);

  /* ---- Shape / elevation ------------------------------------------ */
  --radius-sm: 0.5rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;

  --shadow-soft: 0 1.5rem 3rem -1.75rem rgba(28, 20, 16, 0.45);
  --shadow-lift: 0 2.5rem 4rem -2rem rgba(28, 20, 16, 0.55);

  /* ---- Motion ------------------------------------------------------
     One confident "snap" curve (quick, slightly overshooting — the
     texture of a fast, well-drilled kitchen) plus a slower reveal
     curve for large elements. */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.25s;
  --dur-base: 0.5s;
  --dur-slow: 0.9s;
}