/* Liza Couture — Typography
   Bilingual, first-class Latin + Arabic.
   Latin:  Cormorant Garamond (display serif) + Jost (body/UI sans)
   Arabic: El Messiri (display) + Tajawal (body/UI)
   Set [lang="ar"] / [dir="rtl"] on the html or a wrapper to switch families. */

:root {
  /* ---- Families ---- */
  --font-display: 'Cormorant Garamond', 'El Messiri', Georgia, serif;
  --font-body:    'Jost', 'Tajawal', 'Helvetica Neue', Arial, sans-serif;

  --font-display-ar: 'El Messiri', 'Cormorant Garamond', serif;
  --font-body-ar:    'Tajawal', 'Jost', sans-serif;

  /* ---- Weights ---- */
  --fw-light:   300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semi:    600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* ---- Type scale (fluid-friendly px) ---- */
  --fs-display-xl: 76px;  /* hero gown headline */
  --fs-display-l:  56px;
  --fs-display-m:  42px;
  --fs-heading-l:  32px;
  --fs-heading-m:  25px;
  --fs-heading-s:  20px;
  --fs-body-l:     18px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    13px;
  --fs-micro:      11px;  /* eyebrows / labels */

  /* ---- Line heights ---- */
  --lh-tight:   1.05; /* @kind font */
  --lh-snug:    1.2;  /* @kind font */
  --lh-body:    1.6;  /* @kind font */
  --lh-relaxed: 1.75; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-eyebrow: 0.22em; /* @kind font */
  --ls-wide:    0.08em; /* @kind font */
  --ls-tight:  -0.01em; /* @kind font */
  --ls-normal:  0; /* @kind font */
}

/* ---- Semantic text roles ---- */
.text-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}

.text-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
}

.text-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--text-heading);
}

.text-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* Arabic families swap in wherever content is marked Arabic. */
[lang="ar"] .text-display,
[lang="ar"] .text-heading,
.font-display-ar { font-family: var(--font-display-ar); }

[lang="ar"] .text-body,
[lang="ar"] .text-eyebrow,
.font-body-ar { font-family: var(--font-body-ar); letter-spacing: 0; }