/* ── Sandton Perfumes design tokens ───────────────────────────────────────
   Monochrome. There is no brand accent colour — black carries every action,
   and the only colour permitted on the page comes from the product photos
   themselves and the WhatsApp button, which has to stay its own green to be
   recognised. Swap the values here to re-skin the whole site.
   ------------------------------------------------------------------------ */

:root {
  /* Ground and ink */
  --paper:        #FFFFFF;
  --paper-deep:   #F4F4F4;
  --paper-sink:   #EDEDED;
  --surface:      #FFFFFF;
  --ink:          #0A0A0A;
  --ink-soft:     #565656;
  --ink-faint:    #8C8C8C;
  --rule:         #E4E4E4;
  --rule-strong:  #CFCFCF;

  /* Actions are black. These aliases stay so component CSS reads clearly
     and so a future brand colour can be introduced in one place. */
  --signal:       #0A0A0A;
  --signal-deep:  #2B2B2B;
  --signal-wash:  #F4F4F4;

  /* Reserved for meaning, never decoration */
  --sale:         #0A0A0A;
  --positive:     #1B7F4C;
  --negative:     #B3261E;
  --whatsapp:     #25D366;
  --star:         #0A0A0A;

  /* Type — one family, used for headings and body alike */
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: var(--sans);
  --mono: var(--sans);

  --step--2: 0.7rem;
  --step--1: clamp(0.76rem, 0.74rem + 0.1vw, 0.82rem);
  --step-0:  clamp(0.92rem, 0.9rem + 0.14vw, 1rem);
  --step-1:  clamp(1.08rem, 1.03rem + 0.28vw, 1.24rem);
  --step-2:  clamp(1.34rem, 1.22rem + 0.58vw, 1.72rem);
  --step-3:  clamp(1.72rem, 1.48rem + 1.1vw, 2.5rem);
  --step-4:  clamp(2.25rem, 1.8rem + 2.1vw, 3.75rem);
  --step-5:  clamp(2.7rem, 2rem + 3.5vw, 5.25rem);

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --gutter: clamp(1.15rem, 4vw, 3rem);
  --measure: 68ch;
  --shell: 1280px;

  /* Cards are gently rounded; buttons are full pills. */
  --radius:    10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
  --pill:      999px;

  --shadow-sm: 0 1px 2px rgb(10 10 10 / 0.04), 0 1px 3px rgb(10 10 10 / 0.06);
  --shadow-md: 0 2px 4px rgb(10 10 10 / 0.04), 0 8px 20px rgb(10 10 10 / 0.08);
  --shadow-lg: 0 4px 10px rgb(10 10 10 / 0.06), 0 20px 44px rgb(10 10 10 / 0.12);

  --ease: cubic-bezier(0.32, 0.72, 0.3, 1);

  --nav-h: 60px;
  --marquee-h: 34px;
}

@media (min-width: 900px) {
  :root { --nav-h: 76px; }
}