/* ==========================================================================
   STOREFRONT THEME — DESIGN TOKENS
   The single source of truth for colour, type, spacing, radius and motion.
   Every component reads from here. No hardcoded hex / px in component CSS.

   Reference: the 12 storefront screenshots (Shopify "Horizon"-style default).
   Adapted for this codebase: PHP-rendered, single store, Tunisian COD market,
   prices already formatted "19.990 TND" by includes/config.php::format_price().
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------------ */
  --bg:              #FFFFFF;
  --surface-muted:   #F1F1F1;   /* product-image placeholder background      */
  --text:            #121212;
  --text-muted:      #6B6B6B;
  --border:          #E5E5E5;
  --btn-bg:          #000000;
  --btn-text:        #FFFFFF;
  /* Fill an outline button inverts to on hover, and a label colour that stays
     readable on it. Both are merchant-editable (Reglages > Couleurs); the
     ink is recomputed server-side from the hover colour's luminance. */
  --hover:           #121212;
  --hover-text:      #FFFFFF;
  --overlay:         rgba(0, 0, 0, 0.45);
  --focus:           #121212;

  /* Sale / stock accents kept intentionally quiet (text only, no chips). */
  --price-sale:      #121212;
  --price-compare:   var(--text-muted);

  /* ---- Typography ------------------------------------------------------- */
  /* Inter — variable, loaded from Google Fonts in includes/theme/head.php.
     Zero maintenance, renders crisply at every weight, the de-facto premium
     minimal sans. (Phase 2 can self-host it for the performance budget.) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;

  --fw-body:      400;
  --fw-medium:    500;
  --fw-heading:   700;
  --fw-display:   800;

  --tracking-tight:  -0.02em;   /* headings                                  */
  --tracking-normal:  0;
  --lh-tight:  1.05;            /* display / hero                            */
  --lh-heading: 1.15;
  --lh-body:   1.5;

  --fs-display: clamp(40px, 6.5vw, 76px);  /* catalog H1, "No products found" */
  --fs-h1:      clamp(32px, 5vw, 56px);    /* hero                           */
  --fs-h2:      clamp(26px, 3.2vw, 40px);  /* "Products", "Join our email…"  */
  --fs-body:    16px;
  --fs-body-sm: 15px;                      /* body on small screens          */
  --fs-small:   14px;
  --fs-tiny:    13px;                      /* announcement bar, footer legal  */

  /* ---- Spacing scale --------------------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-24:  96px;
  --sp-32: 128px;

  /* ---- Layout -------------------------------------------------------- */
  --container-max:      1600px;
  --container-pad:      20px;   /* mobile                                   */
  --grid-gap:           12px;   /* product grids                            */
  --header-h:           64px;

  /* ---- Radius ------------------------------------------------------- */
  --r-input:  8px;
  --r-btn:    8px;
  --r-pill:   999px;
  --r-card:   0;                /* product cards have NO radius             */
  --r-panel:  12px;            /* search overlay card                       */

  /* ---- Motion ----------------------------------------------------- */
  --motion-fast:   200ms ease;                       /* hover / opacity     */
  --motion-panel:  280ms cubic-bezier(.4, 0, .2, 1); /* drawers / overlays  */

  /* ---- Elevation -------------------------------------------------- */
  /* Deliberately minimal — no shadows on product cards. Drawers/overlays
     get one soft shadow so they read as lifted above the page. */
  --shadow-panel: 0 20px 60px -12px rgba(0, 0, 0, .18);

  /* ---- Z-index scale ------------------------------------------ */
  --z-header:      100;
  --z-backdrop:    200;
  --z-drawer:      210;
  --z-overlay:     220;   /* search overlay sits above drawers             */
  --z-toast:       300;
}

@media (min-width: 1024px) {
  :root {
    --container-pad: 52px;
    --header-h:      72px;
    --fs-body:       16px;
  }
}

/* Respect reduced-motion: collapse all transition durations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:  1ms linear;
    --motion-panel: 1ms linear;
  }
}