/* =====================================================
 * tokens.css — Layer 1: design tokens
 * Load order: tokens.css → base.css → page CSS
 * ===================================================== */

:root {

    /* ===== Blues ===== */
    --color-brand: #01539F;
    /* navy — identity / navigation */
    --color-primary: #2563EB;
    /* bright blue — primary action */
    --color-primary-soft: #EFF6FF;
    /* pale blue tint */
    --color-primary-hover: #1D4ED8;
    /* primary button hover */

    /* ===== Greens ===== */
    --color-action: #6CB62B;
    /* green button fill */
    --color-action-border: #549A1B;
    /* green button 3D edge */
    --color-success: #549A1B;
    /* success text (= --color-action-border) */
    --color-success-soft: #DFFFC3;
    /* pale green tint */
    --color-whatsapp: #5FAF18;
    /* WhatsApp links/icon */

    /* ===== Red / amber ===== */
    --color-danger: #CF0A13;
    /* errors, discount, crossed-out */
    --color-danger-soft: #FEE2E2;
    /* pale red tint */
    --color-warning: #78350F;
    /* amber text */
    --color-warning-soft: #FEF3C7;
    /* amber background */
    --color-warning-border: #FDE68A;
    /* amber border */

    /* ===== Stars ===== */
    --color-star: #FFDE06;
    --color-star-border: #D9BC00;

    /* ===== Text ===== */
    --color-text: #212121;
    /* main */
    --color-text-secondary: #545454;
    /* secondary */
    --color-text-muted: #707070;
    /* helpers, descriptions */
    --color-text-placeholder: #9A9A9A;
    /* input placeholder */
    --color-text-on-dark: #FFFFFF;
    /* text on filled buttons */

    /* ===== Surfaces & lines ===== */
    --color-bg: #F0F0F0;
    /* page background */
    --color-bg-subtle: #FCFCFC;
    /* near-white — search field + band */
    --color-surface: #FFFFFF;
    /* cards, header, sidebar */
    --color-border: #DDDDDD;
    /* borders, dividers */

    /* Qty +/- gradient (top → bottom) */
    --color-switch-top: #FFFFFF;
    --color-switch-bottom: #E0E0E0;

    /* ===== Form controls ===== */
    --color-focus-ring: #2563EB;
    /* = --color-primary */
    --color-toggle-off: #D4D4D4;
    --color-toggle-on: #549A1B;
    /* = --color-success */

    /* ===== Order status badges ===== */
    --badge-new-text: #01539F;
    --badge-new-bg: #EFF6FF;
    /* pale blue */
    --badge-preparing-text: #78350F;
    --badge-preparing-bg: #FEF3C7;
    /* amber */
    --badge-shipped-text: #549A1B;
    --badge-shipped-bg: #DFFFC3;
    /* pale green */
    --badge-delivered-text: #FFFFFF;
    --badge-delivered-bg: #549A1B;
    /* solid green */
    --badge-returned-text: #CF0A13;
    --badge-returned-bg: #FEE2E2;
    /* pale red */
    --badge-cancelled-text: #707070;
    --badge-cancelled-bg: #DDDDDD;
    /* grey */
    --badge-bankpend-text: #4423A7;
    --badge-bankpend-bg: #DAD5EE;
    /* purple */

    /* ===== Bank-transfer surfaces ===== */
    /* Bank details box — Checkout (§3.9) + Thank You C/D (§3.10). Accent +
       button reuse the bank-pending badge purple; only the soft fill is new. */
    --color-bank-accent: var(--badge-bankpend-text);
    /* #4423A7 — border + labels */
    --color-bank-soft: #F5F4FA;
    /* pale lavender — box fill */
    --color-bank-button: var(--badge-bankpend-bg);
    /* #DAD5EE — Copy RIB fill */

}


/* =====================================================
 * @font-face — self-hosted woff2
 * Weights 400/500/600/700/800 declared (800 = hero headline).
 * Italics are in /assets/fonts but undeclared; add on demand.
 * ===================================================== */

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/inter-v20-latin-800.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/noto-sans-arabic-v33-arabic_latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/noto-sans-arabic-v33-arabic_latin-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/noto-sans-arabic-v33-arabic_latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/noto-sans-arabic-v33-arabic_latin-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/noto-sans-arabic-v33-arabic_latin-800.woff2') format('woff2');
}


/* =====================================================
 * Typography
 * Font size scale = MOBILE values. The @media block below
 * bumps them to desktop sizes at ≥768px.
 * ===================================================== */

:root {

    /* ===== Font families ===== */
    --font-latin: 'Inter', sans-serif;
    --font-arabic: 'Noto Sans Arabic', 'Inter', sans-serif;
    --font-base: var(--font-latin);
    /* body[dir=rtl] swaps to --font-arabic */

    /* ===== Weights ===== */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    /* hero headline only */

    /* ===== Base ===== */
    --font-size-base: 15px;
    --line-height-base: 1.5;
    --line-height-tight: 1.25;
    --line-height-relaxed: 1.7;

    /* ===== Type scale (mobile; desktop in @media) ===== */
    --font-size-h1: 16px;
    /* desktop 24px — page heading */
    --font-size-h2: 14px;
    /* desktop 18px — section heading */
    --font-size-body: 13px;
    /* desktop 14px */
    --font-size-helper: 11px;
    /* desktop 13px — review counts, hints */
    --font-size-meta: 0.75rem;
    /* 12px mobile / 14px desktop — count + meta lines (category, listing) */
    --font-size-card-title: 13px;
    /* desktop 16px — product-card title */
    --font-size-price: 15px;
    /* desktop 18px — card price */
    --font-size-price-lg: 20px;
    /* desktop 24px — product detail price */
    --font-size-stat: 1.75rem;
    /* desktop 2rem — dashboard overview stat numbers */
    --font-size-button: 14px;
    /* same on desktop */
    --font-size-hero-headline: 22px;
    /* desktop 50px — hero headline */
    --font-size-section-title: 17px;
    /* desktop 24px — homepage section titles */
    --font-size-category-name: 14px;
    /* same on desktop — category card name, matches the nav-item size */

    /* How It Works (fixed section) */
    --font-size-hiw-title: 1.375rem;
    /* 22px mobile — matches hero headline; 30px desktop in @media */
    --font-size-hiw-text: 1rem;
    /* 16px — tagline + step title */
    --font-size-hiw-desc: 0.8125rem;
    /* 13px — step description */

    /* ===== Form text (mobile +1px for legibility; desktop unchanged) ===== */
    --font-size-input: 0.875rem;
    /* 14px — input text + placeholder (search, promo, all fields) */
    --font-size-form-label: 0.875rem;
    /* 14px — field labels + radio option titles */
    --font-size-form-hint: 0.75rem;
    /* 12px mobile (13px desktop) — hints, radio subtitles, optional, errors */

}

/* Desktop type scale — mobile values above bumped to their Figma desktop
   sizes at ≥768px (matches the listing filter breakpoint). --font-size-button
   is the same on both, so it isn't redefined. */
@media (min-width: 768px) {
    :root {
        --font-size-h1: 24px;
        --font-size-h2: 18px;
        --font-size-body: 14px;
        --font-size-helper: 13px;
        --font-size-meta: 0.875rem;
        --font-size-card-title: 16px;
        --font-size-price: 18px;
        --font-size-price-lg: 24px;
        --font-size-stat: 2rem;
        --font-size-hero-headline: 50px;
        --font-size-section-title: 24px;
        --font-size-hiw-title: 1.875rem;
        --font-size-form-hint: 0.8125rem;
    }
}


/* =====================================================
 * Arabic optical-size compensation (+2px)
 * -----------------------------------------------------
 * Noto Sans Arabic reads ~2px smaller than Inter at the same size, so every
 * type token is bumped +2px on RTL pages. Consumers read var(--font-size-*)
 * unchanged — only the token VALUES shift here. dir="rtl" is on <html>, so
 * these override :root (equal specificity, later source wins).
 * NOTE: these mirror the Latin scale above +2px. If you change a Latin size
 * later, change its RTL twin here too. rem tokens bump +0.125rem (=2px).
 * ===================================================== */
[dir="rtl"] {
    --font-size-base: 17px;

    --font-size-h1: 17px;
    --font-size-h2: 15px;
    --font-size-body: 14px;
    --font-size-helper: 12px;
    --font-size-meta: 0.8rem;
    --font-size-card-title: 14px;
    --font-size-price: 16px;
    --font-size-price-lg: 21px;
    --font-size-stat: 1.8rem;
    --font-size-button: 15px;
    --font-size-hero-headline: 23px;
    --font-size-section-title: 18px;
    --font-size-category-name: 15px;
    --font-size-hiw-title: 1.4rem;
    --font-size-hiw-text: 1.1rem;
    --font-size-hiw-desc: 0.9rem;
    --font-size-input: 0.95rem;
    --font-size-form-label: 0.95rem;
    --font-size-form-hint: 0.8rem;
}

@media (min-width: 768px) {
    [dir="rtl"] {
        --font-size-h1: 25px;
        --font-size-h2: 19px;
        --font-size-body: 15px;
        --font-size-helper: 14px;
        --font-size-meta: 0.95rem;
        --font-size-card-title: 17px;
        --font-size-price: 19px;
        --font-size-price-lg: 25px;
        --font-size-stat: 2.1rem;
        --font-size-hero-headline: 51px;
        --font-size-section-title: 25px;
        --font-size-hiw-title: 1.9rem;
        --font-size-form-hint: 0.9rem;
    }
}


/* =====================================================
 * Spacing, radius, shadows, control sizing
 * ===================================================== */

:root {

    /* ===== Spacing (4px base) ===== */
    --space-1: 0.25rem;
    /* 4px  */
    --space-2: 0.5rem;
    /* 8px  */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 2rem;
    /* 32px */
    --space-7: 2.5rem;
    /* 40px */
    --space-8: 3rem;
    /* 48px */

    --layout-pad-mobile: var(--space-4);
    --layout-pad-desktop: var(--space-8);
    --layout-pad: var(--layout-pad-mobile);
    /* active side gutter — bumped to desktop value at ≥768px (below) */

    /* Shared content column — full-bleed bands inset their content to
       --container-max via padding-inline: var(--container-inset). */
    --container-max: 1300px;
    --container-inset: max(var(--layout-pad), calc((100% - var(--container-max)) / 2));

    /* ===== Border radius ===== */
    --radius-sm: 0.1875rem;
    /* 3px  — buttons, inputs */
    --radius-md: 0.3125rem;
    /* 5px  — cards */
    --radius-lg: 0.5rem;
    /* 8px  — modals */
    --radius-pill: 999px;
    /* status badges, qty stepper */

    /* ===== Borders ===== */
    --border-width: 1px;

    /* ===== Shadows ===== */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.15);
    --shadow-hero-text: 0 2px 3px rgba(0, 0, 0, 0.4);
    /* legibility on hero images */

    /* ===== Control sizing ===== */
    --control-height: 2.75rem;
    /* 44px — inputs + buttons */
    --action-3d-depth: 0.25em;
    /* green button raised edge depth */
    --color-action-hover: var(--color-action-border);
    /* green button hover */

}

/* Side gutter widens on desktop; --container-inset reads this. */
@media (min-width: 768px) {
    :root {
        --layout-pad: var(--layout-pad-desktop);
    }
}