/* ============================================================
   QITEA Design System — tokens (production build)
   Source: Claude Design handoff, _ds/qitea-design-system-060d76de/tokens/*.css
   Merged into one file to save requests. Token NAMES are unchanged —
   the design markup references var(--qt-*) directly, so do not rename.

   CHANGED vs handoff: fonts.css imported Readex Pro from Google Fonts as a
   stand-in. The handoff itself instructs the production swap to licensed
   29LT Azer, so @font-face rules below load it locally instead. No
   third-party font request remains.
   ============================================================ */

/* ---------- Fonts: 29LT Azer, self-hosted ---------- */
/* woff2 first, ttf as the fallback: browsers take the first format they
   support, so every current one fetches woff2 and nothing downloads twice.
   Compressed with fontTools, no subsetting — subsetting an Arabic face risks
   dropping the contextual forms and ligatures the script needs, and plain
   Brotli already takes the three weights from 1100KB to 208KB (-81%). */
@font-face {
  font-family: "29LT Azer";
  src: url("../fonts/29LTAzer-Regular.woff2") format("woff2"),
       url("../fonts/29LTAzer-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "29LT Azer";
  src: url("../fonts/29LTAzer-Medium.woff2") format("woff2"),
       url("../fonts/29LTAzer-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "29LT Azer";
  src: url("../fonts/29LTAzer-Bold.woff2") format("woff2"),
       url("../fonts/29LTAzer-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Azer ships Regular/Medium/Bold only. 300 and 600 in the design map onto
   400 and 700 rather than letting the browser synthesise a fake weight. */
@font-face {
  font-family: "29LT Azer";
  src: url("../fonts/29LTAzer-Regular.woff2") format("woff2"),
       url("../fonts/29LTAzer-Regular.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "29LT Azer";
  src: url("../fonts/29LTAzer-Bold.woff2") format("woff2"),
       url("../fonts/29LTAzer-Bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Saudi riyal mark. Vendored from @emran-alhaddad/saudi-riyal-font 1.1.0
   (regular only — the bold cut is unused). Was loaded from jsDelivr against
   @latest, which both added a third-party request on the critical path and
   pinned nothing: the glyph visibly flashed as a tofu box before the CDN
   answered, and any upstream release would have shipped straight to
   production unreviewed. 1.27KB — cheaper than the DNS lookup was. */
@font-face {
  font-family: "saudi_riyal";
  src: url("../fonts/saudi_riyal.woff2") format("woff2"),
       url("../fonts/saudi_riyal.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block; /* block, not swap: a fallback glyph here is a wrong currency */
}

:root {
  --qt-font-sans: "29LT Azer", "Segoe UI", system-ui, -apple-system, sans-serif;
  --qt-font-display: "29LT Azer", "Segoe UI", system-ui, sans-serif;
  --qt-font-arabic: "29LT Azer", "Segoe UI", "Tahoma", sans-serif;
  --qt-font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---------- Colors ----------
   Source: QITEA Brand Guidelines (03. Colors) + brand mark gradient */
:root {
  /* Brand green */
  --qt-green: #19e79f;         /* PRIMARY — RGB 25,231,159 */
  --qt-green-bright: #1cfdaf;  /* gradient light stop */
  --qt-green-strong: #15be83;  /* gradient dark stop */
  --qt-mint: #a3f5d9;          /* TERTIARY */
  --qt-mint-soft: #d2ffee;     /* SECONDARY */

  --qt-green-050: #ecfff8;
  --qt-green-100: #d2ffee;
  --qt-green-200: #a3f5d9;
  --qt-green-300: #6ff0c1;
  --qt-green-400: #3fecab;
  --qt-green-500: #19e79f;
  --qt-green-600: #15be83;
  --qt-green-700: #109c6b;
  --qt-green-800: #0c754f;

  /* Slate (brand ink / dark surface) */
  --qt-slate: #2a485c;         /* CUSTOM 1 — RGB 42,72,92 */
  --qt-slate-muted: #7f91ac;   /* CUSTOM 2 */
  --qt-slate-050: #f1f4f7;
  --qt-slate-100: #dde4ea;
  --qt-slate-200: #b9c5d1;
  --qt-slate-300: #7f91ac;
  --qt-slate-500: #4a6377;
  --qt-slate-700: #2a485c;
  --qt-slate-900: #17303f;

  /* Neutrals */
  --qt-white: #ffffff;
  --qt-off-white: #fafafa;
  --qt-grey-200: #dbdbdb;
  --qt-grey-400: #a0a0a0;
  --qt-grey-600: #5b5b5b;
  --qt-black: #000000;

  /* Semantic status */
  --qt-success: #15be83;
  --qt-warning: #f5a524;
  --qt-danger:  #e5484d;
  --qt-info:    #2a485c;

  /* Semantic aliases */
  --qt-brand: var(--qt-green);
  --qt-brand-hover: var(--qt-green-600);
  --qt-brand-active: var(--qt-green-700);
  --qt-brand-contrast: var(--qt-slate);

  --text-strong: var(--qt-slate);
  --text-body: #33465a;
  --text-muted: var(--qt-slate-muted);
  --text-onbrand: var(--qt-slate);
  --text-ondark: var(--qt-off-white);
  --text-link: var(--qt-green-700);

  --surface-page: var(--qt-off-white);
  --surface-card: var(--qt-white);
  --surface-sunken: var(--qt-slate-050);
  --surface-brand: var(--qt-green);
  --surface-brand-soft: var(--qt-green-100);
  --surface-dark: var(--qt-slate);
  --surface-darker: var(--qt-slate-900);

  --border-subtle: var(--qt-grey-200);
  --border-default: #cfd8e0;
  --border-strong: var(--qt-slate-300);
  --border-brand: var(--qt-green);

  --qt-gradient-brand: linear-gradient(135deg, var(--qt-green-bright) 0%, var(--qt-green-strong) 100%);
  --qt-gradient-mint: linear-gradient(135deg, var(--qt-mint-soft) 0%, var(--qt-mint) 100%);
}

/* ---------- Typography scale ----------
   Brand Guidelines (04. Typography) */
:root {
  --qt-fw-light: 300;
  --qt-fw-regular: 400;
  --qt-fw-medium: 500;
  --qt-fw-semibold: 600;
  --qt-fw-bold: 700;

  --qt-text-display: 64px;
  --qt-text-h1: 48px;
  --qt-text-h2: 36px;
  --qt-text-h3: 28px;
  --qt-text-h4: 22px;
  --qt-text-lg: 18px;
  --qt-text-body: 16px;
  --qt-text-sm: 14px;
  --qt-text-xs: 12px;

  --qt-lh-tight: 1.1;
  --qt-lh-snug: 1.25;
  --qt-lh-normal: 1.5;
  --qt-lh-relaxed: 1.7;
  /* ADDED to the handoff scale. The four steps above jump 1.25 -> 1.5, and the
     landing needs a heading leading in between: sub-headings at h3/h4 size set
     too tight at 1.25 and too loose at 1.5. Used by the feature card, sticky
     step title and closing CTA headings, which were all hand-tuned to 1.35-1.4
     in the prototype. One token beats three one-off values. */
  --qt-lh-heading: 1.35;

  --qt-ls-display: -0.02em;
  --qt-ls-heading: -0.01em;
  --qt-ls-normal: 0;
  --qt-ls-caps: 0.08em;

  --font-display: var(--qt-fw-bold) var(--qt-text-display)/var(--qt-lh-tight) var(--qt-font-display);
  --font-h1: var(--qt-fw-bold) var(--qt-text-h1)/var(--qt-lh-tight) var(--qt-font-display);
  --font-h2: var(--qt-fw-semibold) var(--qt-text-h2)/var(--qt-lh-snug) var(--qt-font-display);
  --font-body: var(--qt-fw-regular) var(--qt-text-body)/var(--qt-lh-normal) var(--qt-font-sans);
}

/* ---------- Spacing, radius, shadow, motion ---------- */
:root {
  --qt-space-0: 0;
  --qt-space-1: 4px;
  --qt-space-2: 8px;
  --qt-space-3: 12px;
  --qt-space-4: 16px;
  --qt-space-5: 20px;
  --qt-space-6: 24px;
  --qt-space-8: 32px;
  --qt-space-10: 40px;
  --qt-space-12: 48px;
  --qt-space-16: 64px;
  --qt-space-20: 80px;
  --qt-space-24: 96px;

  --qt-radius-xs: 6px;
  --qt-radius-sm: 10px;
  --qt-radius-md: 14px;
  --qt-radius-lg: 20px;
  --qt-radius-xl: 28px;
  --qt-radius-pill: 999px;
  --qt-radius-circle: 50%;

  --qt-shadow-xs: 0 1px 2px rgba(42,72,92,.06);
  --qt-shadow-sm: 0 2px 8px rgba(42,72,92,.08);
  --qt-shadow-md: 0 8px 24px rgba(42,72,92,.10);
  --qt-shadow-lg: 0 18px 48px rgba(42,72,92,.14);
  --qt-shadow-brand: 0 10px 30px rgba(25,231,159,.35);
  --qt-focus-ring: 0 0 0 3px rgba(25,231,159,.45);

  --qt-ease: cubic-bezier(.22,.61,.36,1);
  --qt-ease-out: cubic-bezier(.16,1,.3,1);
  --qt-dur-fast: 120ms;
  --qt-dur: 200ms;
  --qt-dur-slow: 360ms;

  /* Raised from the handoff's 1200px. Every section in the approved design is
     built at 1240px and was reviewed at that width, so the token follows the
     design rather than the reverse — narrowing the page by 40px to satisfy a
     value nothing consumed would have been a visual change with no cause. */
  --qt-container: 1240px;
  --qt-container-narrow: 880px;
}