/* ── css8 design tokens ─────────────────────────────────────────────────────
   SPACING SCALE — "golden on a 4px grid": each step ≈1.6× the previous, every
   value a multiple of 4 (φ feel, pixel-aligned, usable mid-range).

       --space-0   4px    hairline / icon nudge
       --space-1   8px    tight (icon↔label, small gaps)
       --space-2  12px    default gap / compact padding
       --space-3  20px    card padding / section gap
       --space-4  32px    block separation
       --space-5  52px    large / hero separation

   RULE (stick to it): use var(--space-*) for ALL margins, gaps and padding.
   No raw px for spacing — that's what keeps the visual rhythm consistent. If a
   value isn't on the scale, snap to the nearest token (don't invent 14/16/18).
   Loaded first in index.php; custom properties cascade everywhere.

   BORDERS vs SHADOW — a border has exactly two meanings:
     1. it marks a PRODUCT CARD (the border is the card's signature), or
     2. it's the outline of an interactive CONTROL (button, input, qty-stepper).
   Plain surfaces/panels (nav, dashboard cards, list containers) get NO outline:
   they're white fill on the slate body + var(--shadow-panel) to lift. Internal
   hairline dividers between list rows and active-state accent bars are
   separators, not outlines — those are fine. Don't outline a panel. */
:root {
  --space-0: 4px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 32px;
  --space-5: 52px;

  /* panel lift — subtle, square-friendly; the standard surface shadow */
  --shadow-panel: 0 1px 3px rgba(0, 0, 0, .12);

  /* semantic colors — single source of truth. "Add-to-cart green" is a meaning,
     not a hex: every control that adds to the cart/devis uses it (product page
     "Ajouter au Panier", the devis options commit, …). Change it here, once. */
  --green-cart: #4AAA35;        /* add-to-cart / primary commerce action */
  --price:          #E00000;   /* THE price colour (house convention: prices in red) — #F00 is <4.5:1 on white, this passes AA */
  --price-on-dark:  #FF6B5E;   /* the same red, readable on the dark app chrome (buy dock) */
  --green-cart-dark: #348123;   /* its hover / active state */

  /* brand — derived from the GCOLOR/GDIR constants (css8/fonctions.php) that the
     legacy .gradient class already uses, so the CSS tokens can't drift from it.
     Use --brand-gradient for the OS-window title bars / gradient headers. */
  --brand:          #933318;
  --brand-2:        #ff9923;
  --brand-gradient: linear-gradient(90deg, var(--brand), var(--brand-2));
  /* The house grey gradient (the former page background, still used by progely.css.php) —
     a two-tone 45° split. Backdrop for fullscreen overlays (login). --grey-gradient-end is its
     darkest stop, for surfaces that must blend with it (e.g. the reserved scrollbar gutter). */
  --grey-gradient:     linear-gradient(45deg, #565a62 40%, #3e3e3e 50%, #38393C 50%);
  --grey-gradient-end: #38393C;
}