/* ============================================================
   Framework Technology — Design Tokens (single source of truth)
   Loaded LAST so it governs brand, type, spacing, focus, motion.
   ============================================================ */
:root {
    /* Brand palette (official Framework Technology) */
    --ft-frame-blue: #6ac3ee;
    --ft-frame-blue-600: #2f93c9;
    --ft-frame-blue-700: #176090; /* AA-safe: text on white (5:1) and white on it (6:1) */
    --ft-navy: #111d42;
    --ft-deep-navy: #0e1735;
    --ft-white: #fff;
    --ft-light-gray: #f4f7fb;
    --ft-ink: #1f2a44; /* body text on light (AA on white = 12.4:1) */
    --ft-muted: #51607a; /* secondary text (AA on white = 6.6:1) */
    --ft-border: #dbe3ef;
    /* Map legacy theme variables onto the brand so existing CSS re-themes */
    --main-color: var(--ft-frame-blue-700); /* interactive/base brand */
    --main-color-rgb: 43, 142, 192;
    --color-two: var(--ft-navy);
    --color-two-rgb: 17, 29, 66;
    --color-three: #c9d4e4;
    --color-three-rgb: 201, 212, 228;
    --color-four: var(--ft-light-gray);
    --color-four-rgb: 244, 247, 251;
    --white-color: var(--ft-white);
    --white-color-rgb: 255, 255, 255;
    --black-color: var(--ft-navy);
    --black-color-rgb: 17, 29, 66;
    /* Previously-undefined variables referenced by legacy CSS (now defined) */
    --color-five: #545f75; /* AA-safe muted (≈5:1 on white) */
    --color-six: #33415c;
    --brand: var(--ft-frame-blue);
    --ft-deep: var(--ft-deep-navy);
    --ft-sky: var(--ft-frame-blue);
    --theme-color-light: var(--ft-frame-blue);
    --theme-color-dark: var(--ft-navy);
    --thm-color-2: var(--ft-frame-blue-600);
    --thm-color-3: var(--ft-navy);
    --font-14: 0.875rem;
    --font-16: 1rem;
    --font-18: 1.125rem;
    --margin-top-15: 15px;
    --margin-bottom-10: 10px;
    --padding-right-25: 25px;
    /* Brand gradient (was harsh blue→magenta; now frame-blue→navy) */
    --ft-gradient: linear-gradient(90deg, var(--ft-frame-blue-700) 0%, var(--ft-navy) 100%);
    --ft-gradient-soft: linear-gradient(90deg, var(--ft-frame-blue-600) 0%, var(--ft-frame-blue-700) 100%);
    /* Typography */
    --ft-font-en: system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
    --ft-font-ar: "Droid Arabic Kufi", "Noto Kufi Arabic", system-ui, Tahoma, sans-serif;
    --ft-font-heading: var(--ft-font-en);
    /* Fluid type scale (clamp: min .. vw .. max) */
    --fs-hero: clamp(2rem, 1.1rem + 3.4vw, 3.6rem);
    --fs-h2: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
    --fs-h3: clamp(1.35rem, 1.05rem + 1.2vw, 2rem);
    --fs-h4: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
    --fs-h5: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
    --fs-h6: 1.05rem;
    --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --fs-small: 0.875rem;
    /* Spacing scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    /* Radius / shadow / z-index / motion */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(17,29,66,.06), 0 1px 3px rgba(17,29,66,.08);
    --shadow-md: 0 6px 18px rgba(17,29,66,.08), 0 2px 6px rgba(17,29,66,.06);
    --shadow-lg: 0 18px 48px rgba(17,29,66,.14);
    --z-header: 1000;
    --z-sticky: 1010;
    --z-overlay: 1040;
    --z-modal: 1050;
    --z-cursor: 10000;
    --ease: cubic-bezier(.22,.61,.36,1);
    --dur: .28s;
    --container: 1320px;

    /* ---- Section rhythm -------------------------------------------------
       One half-gap. Every major public section carries this as its own
       padding-block, so the whitespace between any two neighbours is exactly
       twice this value and no section needs to know what sits next to it.

           >=1200px   60px  ->  120px between sections
           992-1199   52px  ->  104px
           768-991    44px  ->   88px
           576-767    36px  ->   72px
           <=575      28px  ->   56px

       Applied in theme.css. Before this existed the same boundary measured
       anywhere from 0px to 320px depending on which two sections met. */
    --fwt-section-space: 30px;
}

@media (max-width: 1199.98px) {
    :root { --fwt-section-space: 52px; }
}

@media (max-width: 991.98px) {
    :root { --fwt-section-space: 44px; }
}

@media (max-width: 767.98px) {
    :root { --fwt-section-space: 36px; }
}

@media (max-width: 575.98px) {
    :root { --fwt-section-space: 28px; }
}