:root{
  --color-navy-950:#050F1C;
  --color-navy-900:#071626;
  --color-navy-800:#0A1F35;
  --color-navy-700:#10304E;
  --color-navy-600:#17406A;
  --color-ink:#0B1D30;
  --color-slate:#3E5468;
  --color-muted:#566D80;
  --color-paper:#F3F6F8;
  --color-card:#FFFFFF;
  --color-teal:#00C2A8;
  --color-teal-600:#00796B;
  --color-teal-100:#D7F5F0;
  --color-teal-050:#ECFAF7;
  --color-gold:#F5A623;
  --color-gold-100:#FBEED6;
  --color-red:#C94E45;
  --color-line:#D8E2E9;
  --color-line-dark:rgba(255,255,255,.14);

  --font-sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --font-arabic:'Cairo',var(--font-sans);

  --content-max:1200px;
  --page-gutter:clamp(16px,4vw,32px);
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;
  --space-7:64px;
  --space-8:96px;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --shadow-sm:0 8px 24px -16px rgba(7,22,38,.2);
  --shadow-md:0 14px 36px -22px rgba(7,22,38,.28);
  --shadow-lg:0 24px 56px -30px rgba(7,22,38,.34);
  --focus-ring:0 0 0 3px rgba(0,194,168,.42);
  --motion-fast:160ms;
  --motion-normal:260ms;
  --motion-slow:520ms;
}