@charset "UTF-8";
/* ==========================================================================
   LÉYA — Design tokens
   --------------------------------------------------------------------------
   The whole storefront is drawn from the values below. No other stylesheet
   contains a literal colour, font stack, radius or duration; if a value needs
   to change it changes here once.

   The palette is built the way a fashion house builds one: a single saturated
   colour (the wine of the wordmark) that earns attention because nothing else
   competes for it, laid on warm paper. The cream that customers already
   associate with Léya is kept — but demoted from page background to tint
   block, which is the difference between a brand colour and a wash.
   ========================================================================== */

:root {
	/* --- Ground -------------------------------------------------------- */
	/* Warm near-white. Reads as paper under both daylight and phone screens,
	   and lets a black abaya photograph sit on it without a grey halo. */
	--paper:        #FFFFFF;
	--paper-sunk:   #F5F3F2;   /* alternating band, form fills            */
	--sand:         #E9E3DF;   /* the heritage cream, now a tint block    */
	--sand-deep:    #D7CFCA;   /* image placeholder, disabled surfaces    */

	/* --- Ink ------------------------------------------------------------ */
	/* Warm black rather than blue-black: sits with the wine instead of
	   fighting it. Steps are alpha, so they hold on any of the grounds. */
	--ink:          #211D1E;
	--ink-2:        #62595C;   /* secondary copy            */
	--ink-3:        #736A6D;   /* meta, captions, disabled  */
	--line:         rgba(25, 18, 16, .14);   /* visible hairline          */
	--line-soft:    rgba(25, 18, 16, .07);   /* barely-there separator    */

	/* --- Brand ---------------------------------------------------------- */
	/* Every interactive commitment on the site is this colour and only this
	   colour. Warmed a touch from the original #51141C so it stays a red at
	   small sizes instead of drifting to brown. */
	--wine:         #55151D;
	--wine-deep:    #3B0E14;   /* hover / pressed                          */
	--wine-wash:    rgba(85, 21, 29, .055);  /* selected rows, soft fills  */
	--wine-edge:    rgba(85, 21, 29, .22);

	/* --- Accent ---------------------------------------------------------- */
	/* Hairlines, rules and the ornament only. Never a fill, never a button:
	   gold as a surface is the fastest way to look inexpensive. */
	--gold:         #A2854F;
	--gold-soft:    rgba(162, 133, 79, .34);

	--white:        #FFFFFF;

	/* --- Signal ---------------------------------------------------------- */
	--ok:           #4A6B4F;
	--warn:         #8A5A2B;
	--err:          #8E3B2E;
	--err-wash:     rgba(142, 59, 46, .08);

	/* --- Type ------------------------------------------------------------ */
	/* Reem Kufi for Arabic display: geometric, architectural, and rare enough
	   in Saudi commerce to read as a house face rather than a template.
	   IBM Plex Sans Arabic carries body and UI in both scripts — one family,
	   two alphabets, so Arabic and Latin never disagree about weight.
	   Cormorant is the Latin wordmark voice, used sparingly. */
	--font-display:    "Noto Naskh Arabic", "IBM Plex Sans Arabic", Georgia, serif;
	--font-body:       "IBM Plex Sans Arabic", "Almarai", -apple-system, "Segoe UI", sans-serif;
	--font-latin:      "Cormorant Garamond", "Reem Kufi", Georgia, serif;
	--font-num:        "IBM Plex Sans Arabic", ui-monospace, monospace;

	/* Fluid scale, 1.26 ratio at the small end opening to 1.42 at the large.
	   Headlines grow faster than body copy, which is what makes a page feel
	   designed on a 27" display and still readable on a 5" one.

	   The display steps top out lower than an equivalent Latin scale would.
	   Arabic letterforms carry more internal detail per word and set on a
	   deeper line, so a headline that reads as confident at 100px in Latin
	   reads as shouting — and wraps to one word per line — in Arabic. */
	--t-2xs:  .75rem;
	--t-xs:   .8125rem;
	--t-sm:   .875rem;
	--t-base: 1rem;
	--t-md:   clamp(1.0625rem, 1.01rem + .27vw, 1.25rem);
	--t-lg:   clamp(1.375rem, 1.24rem + .64vw,  1.75rem);
	--t-xl:   clamp(1.5rem,   1.28rem + 1.05vw, 2.25rem);
	--t-2xl:  clamp(1.875rem, 1.42rem + 2.2vw,  3.25rem);
	--t-3xl:  clamp(2.25rem,  1.52rem + 3.4vw,  4.5rem);

	--lh-tight:   1.06;
	--lh-display: 1.18;
	--lh-body:    1.75;   /* Arabic needs more leading than Latin          */

	/* Tracking. Arabic is cursive — letter-spacing breaks the joins — so the
	   wide tracking below is applied only to Latin eyebrows and never to
	   Arabic running text. See base.css `.eyebrow`. */
	--track-wide:  .22em;
	--track-label: .12em;
	--track-tight: -.01em;

	/* --- Space ------------------------------------------------------------ */
	/* Fluid 8px-rooted scale. The large steps carry most of the luxury: the
	   competition sets 24px between sections, this sets 96–160px. */
	--s-1:  .25rem;
	--s-2:  .5rem;
	--s-3:  .75rem;
	--s-4:  1rem;
	--s-5:  1.5rem;
	--s-6:  2rem;
	--s-7:  clamp(2.5rem, 2rem + 2vw, 3.5rem);
	--s-8:  clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem);
	--s-9:  clamp(4rem, 5.7vw, 6.5rem);
	--s-10: clamp(6.5rem, 4rem   + 10vw, 12rem);

	/* --- Structure --------------------------------------------------------- */
	--page-max:    1560px;   /* wide enough for a 4-up editorial grid       */
	--read-max:    68ch;     /* legal / journal measure                     */
	--gutter:      clamp(1.25rem, .6rem + 3.2vw, 4.5rem);
	--header-h:    132px;
	--announce-h:  38px;

	--r-0:     0px;          /* one radius system: square, editorial        */
	--r-xs:    2px;          /* inputs only, to soften the caret            */
	--r-pill:  999px;

	--hair:      1px solid var(--line);
	--hair-soft: 1px solid var(--line-soft);

	/* --- Elevation ---------------------------------------------------------- */
	/* Two shadows total. Cards get none — separation comes from whitespace. */
	--lift:  0 1px 2px rgba(25, 18, 16, .04), 0 8px 24px rgba(25, 18, 16, .06);
	--lift-2: 0 2px 6px rgba(25, 18, 16, .06), 0 24px 64px rgba(25, 18, 16, .13);

	/* --- Motion --------------------------------------------------------------- */
	/* A single expo-out curve everywhere. Movement decelerates hard and settles,
	   which reads as weight — the thing a heavy crepe abaya actually does. */
	--ease:      cubic-bezier(.16, 1, .3, 1);
	--ease-soft: cubic-bezier(.4, 0, .2, 1);
	--d-1: .18s;
	--d-2: .34s;
	--d-3: .62s;
	--d-4: 1.1s;

	/* --- Layers ----------------------------------------------------------------- */
	--z-sticky:  60;
	--z-header:  70;
	--z-fab:     80;
	--z-drawer:  90;
	--z-modal:  100;
	--z-toast:  110;

	/* Product imagery is shot 4:5 throughout. Declared once so the grid, the
	   PDP gallery and the placeholder SVGs can never disagree and shift layout. */
	--ratio-product: 4 / 5;
	--ratio-editorial: 3 / 4;
	--ratio-wide: 16 / 9;

	color-scheme: light;   /* stop iOS/in-app browsers force-darkening a shop */
}

/* The storefront is deliberately single-scheme. A black abaya on warm paper is
   the product photography's whole contract with the page; a dark mode would
   invert it and make every garment read as a silhouette. We honour the user's
   contrast and motion preferences instead — those change nothing about the
   colour relationship between garment and ground. */

@media (prefers-contrast: more) {
	:root {
		--ink-2: rgba(25, 18, 16, .84);
		--ink-3: rgba(25, 18, 16, .66);
		--line:  rgba(25, 18, 16, .32);
		--line-soft: rgba(25, 18, 16, .18);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--d-1: .01ms;
		--d-2: .01ms;
		--d-3: .01ms;
		--d-4: .01ms;
	}
}