:root{
  /* --- Brand / base --- */
  --ink:#111111;
  --canvas:#ffffff;
  --on-primary:#ffffff;

  /* --- Surface --- */
  --soft-cloud:#f5f5f5;
  --hairline:#cacacb;
  --hairline-soft:#e5e5e5;

  /* --- Text ramp --- */
  --charcoal:#39393b;
  --ash:#4b4b4d;
  --mute:#707072;
  --stone:#9e9ea0;

  /* --- Semantic --- */
  --sale:#d30005;
  --sale-deep:#780700;
  --success:#007d48;
  --success-bright:#1eaa52;
  --info:#1151ff;
  --info-deep:#0034e3;

  /* --- Category accents (chips, swatch dots, editorial washes only) --- */
  --accent-pink:#ed1aa0;
  --accent-pink-soft:#ffb0dd;
  --accent-pink-deep:#4c012d;
  --accent-purple-soft:#beaffd;
  --accent-purple-pale:#d6d1ff;
  --accent-teal:#0a7281;

  /* --- Semantic aliases (use these in components) --- */
  --text-primary:var(--ink);
  --text-body:var(--charcoal);
  --text-secondary:var(--mute);
  --text-lowest:var(--stone);
  --text-inverse:var(--on-primary);
  --text-inverse-secondary:var(--stone);
  --text-sale:var(--sale);
  --text-link:var(--ink);

  --surface-page:var(--canvas);
  --surface-card:var(--canvas);
  --surface-stage:var(--soft-cloud);      /* the studio grey every product sits on */
  --surface-utility:var(--soft-cloud);
  --surface-inverse:var(--ink);

  --border-divider:var(--hairline);
  --border-inset:var(--hairline-soft);
  --border-focus:var(--ink);

  --action-primary-bg:var(--ink);
  --action-primary-fg:var(--on-primary);
  --action-secondary-bg:var(--soft-cloud);
  --action-secondary-fg:var(--ink);
  --action-on-image-bg:var(--canvas);
  --action-on-image-fg:var(--ink);
}