/* ============================================================================
   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;
--text-on-yellow:#53565A;   /* ink on a QF Yellow swipe, fixed in both themes. QF Cool Gray 11, not black (team preference), 5.05:1 */

/* ---- 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:#53565A;   /* QF Cool Gray 11, not black: the team asked for gray ink everywhere. 7.38:1 on white */
--qf-ink-70:#4a4a4a;
--qf-ink-50:#767676;
--qf-ink-30:#a8a8a8;
--qf-line:var(--qf-cool-gray-3);   /* brand hairline, was #dedede */
--qf-surface-tint:#F1F1F1;
--qf-surface-tint-2:#F7F7F7;

/* ---- Semantic aliases ---- */
--text-heading:var(--qf-ink);
--text-ink:var(--qf-ink); /* body text colour; was --text-body, which clashed with the font-size token below */
--text-muted:#6b6e72;   /* a step lighter than the gray ink so it still reads as secondary; 5.12:1 on white (gray-11 at 80% is 4.44, under AA) */
--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-sidra-green); /* Set B is Sidra Green here, so no secondary-palette 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;
}