/* ============================================================
   DESIGN TOKENS — TYPOGRAPHY
   All font families, sizes, weights and line-heights.
   Change globally from here — no PHP edits required.
   ============================================================ */

:root {
    /* ---------- FONT FAMILIES ---------- */
    --font-primary:   'Cairo', 'Noto Sans Arabic', sans-serif;
    --font-heading:   'Cairo', 'Noto Sans Arabic', sans-serif;
    --font-secondary: 'Inter', system-ui, sans-serif;

    /* ---------- FONT SIZES ---------- */
    --font-size-xs:   0.75rem;   /* 12px — feature/ramadan badges */
    --font-size-sm:   0.8rem;    /* 12.8px — discount badges */
    --font-size-base: 0.9rem;    /* 14.4px — buy button */
    --font-size-sm-base: 0.95rem;/* 15.2px — product name */
    --font-size-md:   1rem;      /* 16px — old price */
    --font-size-lg:   1.1rem;    /* 17.6px — ribbon button, strip title */
    --font-size-xl:   1.2rem;    /* 19.2px — hero subtitle, special price */
    --font-size-2xl:  1.5rem;    /* 24px — section heading */
    --font-size-3xl:  2rem;      /* 32px — deal / card title */
    --font-size-4xl:  2.5rem;    /* 40px — hero h1 */

    /* ---------- FONT WEIGHTS ---------- */
    --font-weight-regular:   400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;

    /* ---------- LINE HEIGHTS ---------- */
    --line-height-tight:  1.3;   /* product name, card title */
    --line-height-normal: 1.4;   /* body copy */
    --line-height-loose:  1.6;   /* excerpts */
}