/* Design tokens — the single source of truth for the v2 visual language.
   Nothing below this file should hardcode a colour, size or duration. */

:root {
  /* --- Colour ------------------------------------------------------- */
  /* Paper is declared as channels first so every translucent variant can be
     derived from it. Change this one line and every tint follows. */
  --c-paper-rgb: 249 249 247;
  --c-paper: rgb(var(--c-paper-rgb));   /* page background, off-white */
  --c-on-dark: rgb(var(--c-paper-rgb));

  --c-ink: #162c25;            /* primary text + brand green */
  --c-ink-hover: #2a4f45;
  --c-muted: #929292;
  --c-border: #e3e8ee;
  --c-success: #18B368;        /* positive confirmation, e.g. the success check */

  /* Translucent layers used by the glass components. */
  --c-glass-light: rgb(var(--c-paper-rgb) / 0.55);
  --c-glass-dark: rgb(18 24 22 / 0.42);
  --c-glass-edge-top: rgb(255 255 255 / 0.7);
  --c-glass-edge-bottom: rgb(0 0 0 / 0.05);
  --c-glass-sheen: rgb(255 255 255 / 0.5);

  /* --- Type --------------------------------------------------------- */
  --f-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --f-display: 'V_myfont_002', var(--f-sans);

  --t-xs: 0.6875rem;   /* 11px */
  --t-sm: 0.75rem;     /* 12px */
  --t-base: 0.875rem;  /* 14px */
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-title: 2rem;     /* 32px — page/section headings (Boutique, Commander, …) */
  --t-xl: clamp(1.75rem, 4vw, 3rem);

  --lh-tight: 1.05;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --ls-wide: 0.08em;

  /* --- Space (4px base) --------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* Page gutter, shrinks on small screens. */
  --gutter: clamp(1rem, 4vw, 3rem);

  /* --- Controls ----------------------------------------------------- */
  /* Form-field height — text inputs, delivery chips and the promo button all
     resolve to this, so nothing sits taller than its neighbour in the form. */
  --control-h: 3rem;
  /* The four MAIN CTAs all resolve to this one height, so they read as the same
     button everywhere: "Ajouter au panier" (photo), "Commander" (checkout),
     "Commander" (cart popup), "Retour à la boutique" (success). */
  --cta-h: 2.6875rem;        /* 43px */
  /* Option-control height: the format & margin pills and the quantity stepper
     on the photo page. */
  --control-h-sm: 2.375rem;  /* 38px */

  /* --- Radii -------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* --- Elevation ---------------------------------------------------- */
  --e-glass: 0 8px 32px rgb(22 44 37 / 0.12);
  --e-glass-raised: 0 12px 44px rgb(22 44 37 / 0.18);

  /* --- Motion ------------------------------------------------------- */
  --d-fast: 160ms;
  --d-base: 280ms;
  --d-slow: 620ms;   /* stage crossfade */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* decelerating, "settling" */
  --ease-glass: cubic-bezier(0.32, 0.72, 0, 1);    /* Apple-ish spring-less slide */

  /* --- Layers ------------------------------------------------------- */
  --z-stage: 0;
  --z-stage-overlay: 10;
  --z-chrome: 20;
  --z-nav: 30;
  --z-modal: 40;
  --z-loader: 60;    /* full-page loading veil, above everything */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-base: 1ms;
    --d-slow: 1ms;
  }
}