/* ==========================================================================
   SWAP Design Tokens
   Single source of truth for every visual value on the public website.
   Derived directly from SWAP Brand Guidelines 2026 — Bilingual v3 (+ Appendix 1).
   Imported before public.css. Do not hard-code brand values elsewhere.
   ========================================================================== */

/* --- Approved fonts, self-hosted (SIL OFL, see fonts/*-OFL.txt) -----------
   Both are subsetted variable WOFF2 files with a weight axis. unicode-range
   splits the two so a page only downloads the font it actually needs:
   Latin text -> IBM Plex Sans; Arabic text -> Cairo. */
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-latin.25bd11ed72eb.woff2") format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/cairo-arabic.b15395f20552.woff2") format("woff2");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0898-08E1,
        U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
    /* --- Brand color primitives (approved palette) --------------------- */
    --swap-navy: #11334D;        /* Primary navy — headings, header, footer  */
    --swap-navy-deep: #162840;   /* Deep navy — dark sections                */
    --swap-teal-dark: #104A68;   /* Dark teal — in-content text links (9.54:1) */
    --swap-teal: #1298B1;        /* Primary teal — CTAs, accents, icons only  */
    --swap-graphite: #4A4F57;    /* Neutral graphite — secondary text (8.24:1) */
    --swap-ink: #2B2B2B;         /* Body copy (14.16:1 on white)             */
    --swap-white: #FFFFFF;

    /* --- Semantic colors (use these in components, not primitives) ----- */
    --color-text: var(--swap-ink);
    --color-text-secondary: var(--swap-graphite);
    --color-heading: var(--swap-navy);
    --color-link: var(--swap-teal-dark);          /* AA-safe for body links */
    --color-accent: var(--swap-teal);             /* fills/icons/large only */
    --color-focus: var(--swap-teal);
    --color-surface: #FFFFFF;
    --color-page-bg: #F3F4F6;
    --color-border: #E5E7EB;
    --color-danger: #B42318;
    --color-success: #067647;

    /* Contrast guardrail (Brand Guidelines §Color): --swap-teal is 3.41:1 on
       white — below AA for normal text. Use it only as a fill behind white
       text, for borders/icons, or headings ≥24px. For text links inside copy
       use --color-link (--swap-teal-dark, 9.54:1). */

    /* --- Type families ------------------------------------------------- */
    /* Approved pair, self-hosted via the @font-face rules above:
       IBM Plex Sans (EN/Latin) + Cairo (AR). Both are listed together in one
       stack; unicode-range picks the right one per script (Latin -> Plex,
       Arabic -> Cairo), so the same stack serves both languages. */
    --font-sans: "IBM Plex Sans", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-en: var(--font-sans);
    --font-ar: var(--font-sans);

    /* --- Type scale (px; AR runs ~2px larger, set per-language in CSS) -- */
    --fs-display: 44px;   /* page H1            */
    --fs-h2: 32px;        /* section heading    */
    --fs-h3: 24px;        /* subheading         */
    --fs-lead: 20px;      /* opening paragraph  */
    --fs-body: 16px;      /* body copy          */
    --fs-small: 14px;     /* labels / meta      */
    --fs-caption: 13px;   /* footnotes          */

    --lh-tight: 1.2;
    --lh-body-en: 1.6;
    --lh-body-ar: 1.8;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* --- Spacing scale (8-based) --------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* --- Radii (3 levels) ---------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* --- Shadows (3 levels) -------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(17, 51, 77, 0.06);
    --shadow-md: 0 8px 24px rgba(17, 51, 77, 0.10);
    --shadow-lg: 0 16px 40px rgba(17, 51, 77, 0.14);

    /* --- Breakpoints (documented; reference in media queries) ---------- */
    --bp-tablet: 768px;
    --bp-desktop: 1024px;
    --bp-wide: 1440px;

    /* --- Motion (respect prefers-reduced-motion in components) --------- */
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 320ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-base: 0ms;
        --motion-slow: 0ms;
    }
}