/* TIALA brand tokens — v2 Burgundy (2026-09-29)
   Fonts: load from Google Fonts
   https://fonts.googleapis.com/css2?family=Alexandria:wght@400;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&display=swap */
:root {
  /* Core palette */
  --tiala-burgundy:#6B1D2F; /* Burgundy — primary: logo, primary buttons, key accents */
  --tiala-burgundy-hover: #521623;
  --tiala-teal:    #1F5E5B; /* Qamariya Teal — secondary: links, secondary accents */
  --tiala-saffron: #E3A63C; /* Saffron — highlight only: badges, sale, "new" (ink text on it, never white) */
  --tiala-ink:     #221C18; /* Ink — body text, dark surfaces */
  --tiala-sand:    #E6D6BF; /* Sand — cards, section bands, packaging */
  --tiala-gypsum:  #F6F0E6; /* Gypsum — page background */
  --tiala-muted:   #6B5E52; /* secondary text on gypsum (AA) */

  /* Semantic */
  --color-bg: var(--tiala-gypsum);
  --color-surface: #FFFFFF;
  --color-surface-alt: var(--tiala-sand);
  --color-text: var(--tiala-ink);
  --color-text-muted: var(--tiala-muted);
  --color-primary: var(--tiala-burgundy);
  --color-primary-hover: var(--tiala-burgundy-hover);
  --color-on-primary: var(--tiala-gypsum);
  --color-link: var(--tiala-teal);
  --color-highlight: var(--tiala-saffron);
  --color-border: var(--tiala-sand);

  /* Type */
  --font-display: 'Bricolage Grotesque', Georgia, serif;   /* Latin headings, wordmark feel */
  --font-body: 'Alexandria', system-ui, sans-serif;        /* body text + ALL Arabic text */
  --font-arabic: 'Alexandria', 'Noto Kufi Arabic', sans-serif;

  --fs-display: clamp(2.5rem, 6vw, 4.75rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.125rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fw-display: 800;
  --tracking-display: -0.03em; /* Latin only — never letter-space Arabic */

  /* Shape & space */
  --radius-sm: 8px;
  --radius-md: 12px;   /* buttons, inputs */
  --radius-lg: 20px;   /* cards */
  --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --tap-min: 44px;
}
[dir="rtl"] { --font-display: var(--font-arabic); --tracking-display: 0; }