/* ============================================================================
   Qatar Foundation Design System — tokens
   Sourced from the "Qatar Foundation Design System" (tokens/colors.css,
   typography.css, spacing.css, effects.css, fonts.css). Self-hosted QF fonts.
   Consumed by the shared PUE microsite foundation (pue-microsite.css).
   ============================================================================ */

/* ---- QF brand font (self-hosted from the design system) ---- */
@font-face { font-family: "QF"; src: url("../fonts/QF-Light.woff2")    format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "QF"; src: url("../fonts/QF-Regular.woff2")  format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "QF"; src: url("../fonts/QF-Medium.woff2")   format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "QF"; src: url("../fonts/QF-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "QF"; src: url("../fonts/QF-Bold.woff2")     format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "QF Serif"; src: url("../fonts/qf-serif.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
/* ---- Primary palette (Brand Guidelines §4, "Set A" + heritage marks) ---- */
--qf-sidra-green:#034638;   /* Pantone 3308 C */
--qf-yellow:#F3E500;        /* Pantone 3945 C */
--qf-adham:#8A1538;         /* Pantone 1955 C — official national projects only */
--qf-cool-gray-11:#53565A;  /* Pantone Cool Gray 11 */
--qf-cool-gray-3:#C8C9C7;   /* Pantone Cool Gray 3 */
--qf-white:#FFFFFF;

/* ---- Secondary palette (§4, "Set B" — youthful accents, use sparingly) ---- */
--qf-orange:#FF671F;        /* Pantone 165 C */
--qf-leaf:#78BE20;          /* Pantone 368 C */
--qf-pink:#F04E98;          /* Pantone 212 C */
--qf-mint:#6ECEB2;          /* Pantone 338 C */
--qf-cyan:#00BCE7;          /* Pantone 306 C */

/* ---- Tint ramps (100/80/60/40/20% screens) ---- */
--qf-sidra-green-80:#356b60;--qf-sidra-green-60:#679087;--qf-sidra-green-40:#9ab5af;--qf-sidra-green-20:#ccdad7;
--qf-yellow-80:#f5ea33;--qf-yellow-60:#f8f066;--qf-yellow-40:#faf599;--qf-yellow-20:#fdfacc;
--qf-adham-80:#a14460;--qf-adham-60:#b97388;--qf-adham-40:#d0a1af;--qf-adham-20:#e8d0d7;
--qf-cool-gray-11-80:#75787b;--qf-cool-gray-11-60:#989a9c;--qf-cool-gray-11-40:#babbbd;--qf-cool-gray-11-20:#dddddd;
--qf-cool-gray-3-80:#d3d4d2;--qf-cool-gray-3-60:#dedfdd;--qf-cool-gray-3-40:#e9e9e9;--qf-cool-gray-3-20:#f4f4f4;
--qf-orange-80:#ff854c;--qf-orange-60:#ffa479;--qf-orange-40:#ffc2a5;--qf-orange-20:#ffe1d2;
--qf-leaf-80:#93cb4d;--qf-leaf-60:#aed879;--qf-leaf-40:#c9e6a6;--qf-leaf-20:#e4f2d2;
--qf-pink-80:#f371ad;--qf-pink-60:#f695c2;--qf-pink-40:#f9b8d6;--qf-pink-20:#fcdceb;
--qf-mint-80:#8bd8c1;--qf-mint-60:#a8e2d1;--qf-mint-40:#c5ebe0;--qf-mint-20:#e2f5f0;
--qf-cyan-80:#33c9ec;--qf-cyan-60:#66d7f1;--qf-cyan-40:#99e4f5;--qf-cyan-20:#ccf2fa;

/* ---- Neutral ink ramp (digital) ---- */
--qf-ink:#111111;
--qf-ink-70:#4a4a4a;
--qf-ink-50:#767676;
--qf-ink-30:#a8a8a8;
--qf-line:#dedede;
--qf-surface-tint:#F1F1F1;
--qf-surface-tint-2:#F7F7F7;

/* ---- Semantic aliases ---- */
--text-heading:var(--qf-ink);
--text-body:var(--qf-ink);
--text-muted:var(--qf-ink-70);
--text-subtle:var(--qf-ink-50);
--text-on-dark:var(--qf-white);
--text-brand:var(--qf-sidra-green);
--text-link:var(--qf-sidra-green);
--text-link-hover:var(--qf-orange);

--surface-page:var(--qf-white);
--surface-tint:var(--qf-surface-tint);
--surface-card:var(--qf-white);
--surface-inverse:var(--qf-ink);
--surface-brand:var(--qf-sidra-green);

--border-default:var(--qf-line);
--border-strong:var(--qf-ink);
--border-subtle:var(--qf-cool-gray-3);

--accent-primary:var(--qf-orange);
--accent-highlight:var(--qf-mint);
--accent-editorial:var(--qf-yellow);
--focus-ring:var(--qf-cyan);

/* ---- Typography ---- */
--font-sans:"QF","Helvetica Neue",Arial,sans-serif;
--font-serif-display:"QF Serif","Times New Roman",Georgia,serif;
--font-arabic:"QF","Noto Naskh Arabic",serif;

--weight-thin:100;--weight-extralight:200;--weight-light:300;--weight-regular:400;
--weight-medium:500;--weight-semibold:600;--weight-bold:700;

/* ---- Type scale ----
   Deliberate deviation from the design system, which specifies this scale in px
   on a 14px body: the values below are rem, so they honour the reader's browser
   font size instead of overriding it, and each step is one size larger. At the
   default 16px root that makes body 16px rather than 14px, and the smallest UI
   text 13px rather than 11px — the px scale read as too small in practice, and
   form labels and hints at 13/12px were the worst of it.

   rem, not em, so a size never compounds with its container. Multiply by 16 for
   the px equivalent at the default root size. */
--text-display-1:clamp(2.5rem,4.6vw,4.25rem);   /* 40 → 68 */
--text-display-2:clamp(2rem,3.4vw,3rem);        /* 32 → 48 */
--text-display-3:clamp(1.625rem,2.4vw,2.125rem);/* 26 → 34 */
--text-title-1:1.625rem;   /* 26 */
--text-title-2:1.375rem;   /* 22 */
--text-title-3:1.1875rem;  /* 19 */
--text-body-lg:1.125rem;   /* 18 */
--text-body:1rem;          /* 16, was 14 */
--text-body-sm:0.9375rem;  /* 15, was 13 */
--text-caption:0.875rem;   /* 14, was 12 — labels and hints live here */
--text-micro:0.8125rem;    /* 13, was 11 */

--leading-display:1.12;
--leading-heading:1.2;
--leading-body:1.55;
--leading-tight:1.3;

--tracking-display:-0.015em;
--tracking-normal:0;
--tracking-wide:0.04em;
--tracking-eyebrow:0.08em;

/* ---- Spacing / layout ---- */
--space-0:0;--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-16:64px;
--space-20:80px;--space-24:96px;--space-32:128px;
--gutter:24px;
--container-max:1280px;
--container-text:680px;
--section-y:96px;
--section-y-sm:56px;

/* ---- Effects / motion ---- */
--radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-pill:999px;--radius-circle:50%;
--border-hairline:1px solid var(--border-default);
--border-frame:1px solid var(--qf-ink);
--shadow-none:none;
--shadow-raise:0 1px 2px rgba(17,17,17,.06);
--shadow-card:0 2px 12px rgba(17,17,17,.08);
--shadow-overlay:0 8px 32px rgba(17,17,17,.14);
--ease-standard:cubic-bezier(.4,0,.2,1);
--ease-out:cubic-bezier(0,0,.2,1);
--duration-fast:120ms;
--duration-base:200ms;
--duration-slow:400ms;
--transition-base:all var(--duration-base) var(--ease-standard);

/* ---- Legibility scrim for text over photography ---- */
--scrim-bottom:linear-gradient(to top,rgba(17,17,17,.72) 0%,rgba(17,17,17,0) 60%);
--scrim-flat:rgba(17,17,17,.45);
--blur-glass:blur(12px);

/* ---- Logo clearspace (Brand Guidelines §1: clearspace = logo height / 2) ---- */
--logo-clearspace-ratio:0.5;
--logo-min-h-primary:70px;
--logo-min-h-horizontal:140px;
}