/* =========================================================================
   LEYA ABAYAS — Design tokens
   Single source of truth for colour, type, spacing, structure and motion.
   Load this file FIRST — shop-layout.css and responsive.css consume these
   custom properties and contain no literal values of their own.
   ========================================================================= */

:root {
  /* Colour — derived from the Léya wordmark: burgundy on warm cream */
  color-scheme: light;          /* stops iOS / in-app browsers force-darkening the shop */
  --cream:      #F1E1D1;
  --sand:       #E4D2BF;
  --sand-deep:  #D2BCA5;
  --ink:        #2B1216;
  --ink-70:     rgba(43, 18, 22, .72);
  --ink-45:     rgba(43, 18, 22, .48);
  --ink-15:     rgba(43, 18, 22, .16);
  --ink-08:     rgba(43, 18, 22, .08);
  --wine:       #51141C;        /* the logo colour — every action lives here */
  --wine-deep:  #3A0D13;
  --wine-soft:  #7A2A31;
  --gold:       #B08D57;        /* hairline accent only: star ratings, rules */
  --gold-deep:  #8C6D3F;
  --white:      #FFFFFF;
  --success:    #4B6B4F;
  --danger:     #8E3B2E;

  /* Type */
  --font-display: "Marcellus", "Reem Kufi", Georgia, serif;
  --font-body:    "Jost", "Almarai", "Helvetica Neue", Arial, sans-serif;
  --font-ar-display: "Reem Kufi", "Marcellus", serif;
  --font-ar-body:    "Almarai", "Jost", Arial, sans-serif;

  --step--1: clamp(.75rem, .72rem + .12vw, .8125rem);
  --step-0:  clamp(.875rem, .85rem + .15vw, .9375rem);
  --step-1:  clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-2:  clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --step-3:  clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);
  --step-4:  clamp(2.125rem, 1.6rem + 2.6vw, 3.75rem);
  --step-5:  clamp(2.75rem, 1.8rem + 4.4vw, 5.5rem);

  --tracking-label: .18em;

  /* Space — 8px scale */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4rem;   --s7: 6rem;   --s8: 8rem;

  /* Structure */
  --radius: 0px;              /* one radius system: sharp, editorial */
  --rail: 1px solid var(--ink-15);
  --page-max: 1440px;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --header-h: 74px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .45s;
}