/*
 * TheGala - design tokens.
 *
 * Values extracted from the reference Figma (file bk1l04x4WRHKTpa3w0dkDJ,
 * hero node 1:46) via get_design_context. Do not invent values here.
 *
 * ACCESSIBILITY NOTE - measured, not assumed:
 *   #C3937C on #FBF8F1 = 2.54:1  (AA large text needs 3:1)   FAILS
 *   #787878 on #FBF8F1 = 4.16:1  (AA body text needs 4.5:1)  FAILS
 * Accessible alternates holding the same hue are provided as --tg-accent-aa
 * and --tg-muted-aa. Swap the two lines marked PIXEL-PERFECT to move the
 * whole site to the compliant pair.
 */

:root {
  /* ---- Colour: reference palette ---- */
  --tg-bg: #FBF8F1;              /* cream ground, sampled from the design */
  --tg-surface: #F5F0E6;
  --tg-card: #FFFFFF;

  --tg-accent: #C3937C;          /* PIXEL-PERFECT: rose-gold, fails contrast */
  --tg-muted: #787878;           /* PIXEL-PERFECT: body grey, fails contrast */

  --tg-accent-aa: #A96B52;       /* same hue, passes AA */
  --tg-muted-aa: #6E6E6E;        /* same hue, passes AA */

  --tg-ink: #2B2622;
  --tg-interactive: var(--tg-accent);
  --tg-interactive-hover: #A96B52;
  --tg-accent-soft: #F0E2D8;
  --tg-on-accent: #FFFFFF;
  --tg-border: rgba(195, 147, 124, 0.35);

  /* ---- Type ---- */
  /* Cormorant and Montserrat carry no Arabic glyphs, so each is paired with
     an Arabic face. Latin resolves first, Arabic falls through. */
  --tg-font-display: 'Cormorant', 'Amiri', serif;
  --tg-font-body: 'Montserrat', 'Cairo', sans-serif;

  --tg-weight-regular: 400;
  --tg-weight-medium: 500;
  --tg-weight-semibold: 600;

  /* Sizes as designed (1726px artboard) */
  --tg-display: 60px;
  --tg-h2: 48px;
  --tg-h3: 24px;
  --tg-body: 16px;
  --tg-body-lh: 25px;
  --tg-eyebrow: 16px;
  --tg-eyebrow-tracking: 5px;
  --tg-button-text: 14px;

  /* Mobile step-down. Arabic needs more leading than the Latin design uses. */
  --tg-display-mobile: 34px;
  --tg-h2-mobile: 28px;
  --tg-lh-arabic: 1.8;

  /* ---- Spacing ---- */
  --tg-space-1: 4px;
  --tg-space-2: 8px;
  --tg-space-3: 12px;
  --tg-space-4: 16px;
  --tg-space-5: 20px;
  --tg-space-6: 24px;
  --tg-space-8: 32px;
  --tg-space-10: 40px;
  --tg-space-12: 48px;
  --tg-space-16: 64px;

  /* ---- Shape ---- */
  --tg-radius-sm: 10px;
  --tg-radius-md: 12px;
  --tg-radius-lg: 14px;
  --tg-radius-pill: 50px;        /* button radius from the design */
  --tg-arch: 246.5px;            /* hero arch corner radius from the design */

  /* ---- Controls ---- */
  --tg-button-w: 151px;
  --tg-button-h: 50px;
  --tg-touch-min: 44px;

  /* ---- Layout ---- */
  --tg-artboard: 1726px;
  --tg-content-max: 1200px;

  /* ---- Motion ---- */
  --tg-dur-micro: 180ms;
  --tg-dur-enter: 500ms;
  --tg-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --tg-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --tg-stagger: 70ms;
  --tg-reveal-travel: 20px;

  /* ---- Ornament ---- */
  --tg-pattern-star: url('../img/pattern-star.svg');
  --tg-botanical: url('../img/botanical.svg');
}

@media (min-width: 640px) {
  :root { --tg-lh-arabic: 1.9; }
}

/* Arabic sits on Amiri/Cairo, which need more leading than the Latin design
   allows for - diacritics collide otherwise. */
[lang^="ar"] body,
[dir="rtl"] body {
  line-height: var(--tg-lh-arabic);
}