/* ===========================================================================
   Mercado — design tokens

   Foundation: paper. Two neutral surfaces and one near-black, nothing else.
   Brand orange appears on price, CTA and active state — nowhere else.

   Why paper and not a dark stage: every product photograph in this catalogue
   is an isolated shot on a white background. On a dark page each one reads as
   a bright rectangle pasted onto the design; on paper they bleed into it and
   the product edge is the only edge you see.
   =========================================================================== */

:root {
  /* ---- surfaces ------------------------------------------------------ */
  --paper:    #FFFFFF;
  --paper-2:  #F5F5F3;   /* warm neutral, for alternating bands */
  --night:    #0E0E0E;   /* exactly one section uses this */

  /* ---- ink ----------------------------------------------------------- */
  /* Ratios are paper / paper-2. Every ink is small-text safe (WCAG AA 4.5:1)
     on both surfaces: --ink-3 was #9B9B9B (2.8:1) and ended up on labels,
     breadcrumbs and old prices at 11–14px, so it was brought up to the
     lightest grey that passes, and --ink-2 moved down to keep a visible
     step between them. */
  --ink:      #111111;   /* 18.9 / 17.3 */
  --ink-2:    #5C5C5C;   /* 6.7 / 6.1 — supporting copy */
  --ink-3:    #707070;   /* 5.0 / 4.5 — labels, meta, old prices */

  /* Rules. --line and --line-2 are decoration and may stay faint; the edge of
     a control someone has to find (text field, select, quantity stepper) uses
     --line-field, which clears the 3:1 non-text minimum (WCAG 1.4.11). */
  --line:       #E6E6E3;
  --line-2:     #D2D2CE;
  --line-field: #8A8A86;   /* 3.5 / 3.2 */

  --on-night:     #F2F2F0;
  --on-night-2:   #9A9A97;
  --line-night:   rgb(255 255 255 / 0.14);

  /* ---- brand ---------------------------------------------------------
     #F6911D sampled from the logo file. --brand-ink is the darkened form
     used when the orange has to carry small text on paper (4.6:1). */
  --brand:      #F6911D;
  --brand-ink:  #A25C00;
  --on-brand:   #1A1205;   /* 7.1:1 on --brand */

  /* ---- type ----------------------------------------------------------
     One family. Weight and size do the work, not extra typefaces. */
  --font: "Cairo", "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;

  /* Editorial scale — the display size is meant to feel almost too large. */
  --t-display: clamp(2.6rem, 0.9rem + 6vw, 6rem);
  --t-h1:      clamp(2.1rem, 1.1rem + 4.4vw, 4.5rem);
  --t-h2:      clamp(1.55rem, 1.05rem + 2.2vw, 2.9rem);
  --t-h3:      clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  --t-lede:    clamp(1rem, 0.94rem + 0.4vw, 1.2rem);
  --t-body:    1rem;
  --t-sm:      0.875rem;
  --t-micro:   0.72rem;

  /* Huge Arabic still needs descender room; 1.1 is as tight as it goes. */
  --lh-display: 1.1;
  --lh-head:    1.28;
  --lh-body:    1.8;

  /* Arabic is cursive: tracking pulls the joins apart, so labels are set at
     the font's own metrics. Tracking is kept for Latin runs only — the step
     numerals and the wordmark — via --track-latin. */
  --track-label: normal;
  --track-latin: 0.16em;

  /* ---- space --------------------------------------------------------- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 7rem;

  /* Whitespace is the main design material here, so sections are large. */
  --section: clamp(5rem, 3rem + 8vw, 10rem);
  --gutter:  clamp(1.25rem, 0.5rem + 3.2vw, 4rem);
  --max:     1440px;
  --max-text: 62ch;

  /* ---- shape ---------------------------------------------------------
     Soft corners throughout (the square system was retired at the owner's
     request). components.css applies them in one place.
       --r       fields, notices, small panels
       --r-sm    thumbnails and swatches
       --r-card  image frames, tiles, bands
     Buttons keep the pill. */
  --r:      12px;
  --r-sm:   10px;
  --r-card: 20px;
  --r-pill: 999px;


  /* ---- motion --------------------------------------------------------
     Slow and mechanical, like a camera move. No overshoot anywhere. */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast:   180ms;
  --d:        360ms;
  --d-slow:   800ms;

  /* ---- layers -------------------------------------------------------- */
  --z-header:  100;
  --z-overlay: 200;

  --header-h: 68px;

  color-scheme: light;
}