/* ===========================================================================
   Afaq Tea — Design Tokens (CSS custom properties)
   RTL-first. Drop into a global stylesheet and reference from Tailwind config
   (see tailwind.config.js) or directly via var(--token).
   =========================================================================== */

:root {
  /* ---- Brand colors ---- */
  --color-primary:        #0F4D3C; /* tea green — primary actions, headings */
  --color-primary-hover:  #0c3f31;
  --color-accent:         #C19A4B; /* brass gold — accents, highlights */
  --color-accent-hover:   #a9803a;
  --color-heritage:       #9C3B2E; /* terracotta — sale badges, destructive */

  /* ---- Surfaces & text ---- */
  --color-bg:        #FAF6EE; /* warm sand — page background, soft fills */
  --color-surface:   #FFFFFF; /* cards, sheets */
  --color-ink:       #2A241D; /* primary text */
  --color-ink-soft:  #5a5142; /* body text on light */
  --color-muted:     #7c7460; /* secondary text */
  --color-muted-2:   #9a917c; /* tertiary / captions */

  /* ---- Lines & subtle fills ---- */
  --color-border:        #e0d8c6; /* input & control borders */
  --color-border-soft:   #ece6d8; /* card borders */
  --color-divider:       #f1ebdd; /* hairline dividers */
  --color-sand-line:     #eadfca; /* on sand backgrounds */

  /* ---- On dark (primary green) panels ---- */
  --color-on-primary:        #EFE7D6;
  --color-on-primary-muted:  #bcae90;

  /* ---- Typography ---- */
  --font-display: "El Messiri", serif;   /* headings, display, prices */
  --font-body:    "Tajawal", sans-serif;  /* body, UI, buttons, inputs */
  --font-calli:   "Aref Ruqaa", serif;    /* calligraphic accent (sparingly) */
  --font-latin:   "Inter", sans-serif;    /* Latin labels / eyebrows / SAR codes */

  /* Type scale (px) */
  --text-display: 58px;  /* hero h1 (desktop) */
  --text-h1:      36px;
  --text-h2:      32px;
  --text-h3:      22px;
  --text-lg:      18px;
  --text-base:    16px;
  --text-sm:      14px;
  --text-xs:      13px;
  --text-2xs:     11px;  /* Inter eyebrows, uppercase, letter-spacing .12em */

  /* ---- Radii ---- */
  --radius-sm:  8px;
  --radius-md:  11px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-card:     0 10px 26px rgba(42, 36, 29, 0.06);
  --shadow-elevated: 0 18px 50px rgba(42, 36, 29, 0.12);
  --shadow-hero:     0 24px 64px rgba(42, 36, 29, 0.16);
  --shadow-btn:      0 10px 24px rgba(15, 77, 60, 0.26);
  --shadow-accent:   0 12px 26px rgba(193, 154, 75, 0.30);

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

  /* Layout */
  --container-max: 1280px;
  --mobile-frame:  390px;
}

/* Arabic-Indic numerals: prices/quantities in the mocks use ٠١٢٣٤٥٦٧٨٩.
   In production prefer real numbers + CSS so totals stay computable: */
.nums-arabic { font-feature-settings: "ss01"; /* or use Intl.NumberFormat('ar-SA') */ }