/* ==========================================================================
   Design tokens — the single source for colour, type, space, radius, shadow
   and interaction states. Components only reference these variables.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/plex-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  /* ---- colour: neutrals ---- */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-soft: #f5f8fd;
  --color-ink: #0b0d12;          /* headings */
  --color-text: #1f2937;         /* body */
  --color-muted: #4b5a73;        /* secondary text, 6.9:1 on white */
  --color-line: #e3e9f3;
  --color-line-strong: #c3cfe2;

  /* ---- colour: brand blue ---- */
  --color-blue: #0a5cff;
  --color-blue-hover: #0847cc;
  --color-blue-press: #063aaa;
  --color-blue-100: #e3edff;
  --color-blue-50: #f1f6ff;

  /* ---- colour: service tones (icon on soft circle) ---- */
  --tone-blue: #0a5cff;      --tone-blue-bg: #dce9ff;
  --tone-orange: #ec5a0c;    --tone-orange-bg: #ffe6d6;
  --tone-teal: #0b9a8a;      --tone-teal-bg: #d3f3ee;
  --tone-purple: #6a43e0;    --tone-purple-bg: #e9e3fd;
  --tone-gold: #9a6700;      --tone-gold-bg: #fbeecb;
  --tone-rose: #cf2a5b;      --tone-rose-bg: #fde2ea;
  --tone-green: #17803f;     --tone-green-bg: #d8f2e2;
  --tone-sky: #0a7fb5;       --tone-sky-bg: #d6edf8;

  /* ---- colour: status ---- */
  --color-success: #0c7a47;  --color-success-bg: #ddf5e8;
  --color-warning: #8a4b00;  --color-warning-bg: #fff0d1;
  --color-danger: #b4162f;   --color-danger-bg: #fde7eb;
  --color-info: #0847cc;     --navy-950: #050f26;
  --navy-900: #07173d;
  --navy-800: #0c2559;
  --color-info-bg: #e3edff;
  --color-soon: #4f2bc2;     --color-soon-bg: #efeafe;

  /* ---- typography ---- */
  --font-latin: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Inter", "Segoe UI", Tahoma, "Noto Naskh Arabic", Arial, sans-serif;
  --font-sans: var(--font-latin);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.625rem, 1.35rem + 1.1vw, 2rem);
  --text-display: clamp(3rem, 1.2rem + 5.6vw, 5rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;
  --tracking-display: -0.05em;
  --tracking-heading: -0.03em;

  /* ---- space (4px grid) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4.5rem;
  --space-10: 6rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 1200px;
  --container-narrow: 820px;

  /* ---- radius ---- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- shadow ---- */
  --shadow-sm: 0 1px 2px rgba(16, 36, 80, 0.05), 0 1px 3px rgba(16, 36, 80, 0.06);
  --shadow-md: 0 10px 28px -10px rgba(16, 48, 110, 0.16), 0 2px 6px rgba(16, 48, 110, 0.05);
  --shadow-lg: 0 28px 60px -22px rgba(16, 48, 110, 0.28), 0 4px 12px rgba(16, 48, 110, 0.06);

  /* ---- interaction ---- */
  --focus-ring: 3px solid var(--color-blue);
  --focus-ring-inverse: 3px solid #ffffff;
  --focus-offset: 3px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 160ms;
  --tap-target: 48px;

  /* ---- layout ---- */
  --header-height: 72px;
}

:root[dir="rtl"],
.lang-ar {
  --font-sans: var(--font-arabic);
  --tracking-display: 0;
  --tracking-heading: 0;
  --leading-tight: 1.3;
}

@media (max-width: 640px) {
  :root { --header-height: 64px; }
}