/* Polyment — the map, lit — generated from tokens.json */
:root, [data-theme="map-lit"] {
  --navy: #081d3a;
  --navy-deep: #050f22;
  --navy-soft: #0e2748;
  --navy-lift: #123763;
  --navy-line: rgba(238,242,247,0.14);
  --on-navy: #eef2f7;
  --on-navy-soft: #c7d2e0;
  --on-navy-dim: #8da0bf;
  --ember: #f09a22;
  --ember-hover: #f5ab45;
  --ember-press: #e08a17;
  --ember-glow: rgba(240,154,34,0.5);
  --goal-halo: rgba(240,154,34,0.18);
  --correct: #4fb39a;
  --wrong: #ee8f78;
  --map-edge: rgba(141,160,191,0.35);
  --map-edge-strong: rgba(141,160,191,0.6);
  --scrim: rgba(5,15,34,0.6);
  --print-paper: #ffffff;
  --print-ink: #081d3a;
  --print-slate: #4b5563;
  --print-accent: #9e5508;
  --print-line: #e3e0d8;
  --shadow-pop: 0px 24px 60px -20px rgba(8,29,58,0.28);
  --shadow-sheet: 0px 32px 80px -24px rgba(2,8,20,0.7), 0px 2px 8px rgba(2,8,20,0.35);
  --glow-ember: 0px 10px 28px -10px rgba(240,154,34,0.55);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-pill: 999px;
  --sidebar: 280px;
  --sidebar-rail: 84px;
  --topbar: 88px;
  --header: 72px;
  --container: 1240px;
  --measure: 66ch;
  --gutter: clamp(20px, 5vw, 72px);
  --control-h: 52px;
  --button-h: 48px;
  --focus-ring: 3px;
  --focus-offset: 2px;
  --bp-420: 420px;
  --bp-520: 520px;
  --bp-560: 560px;
  --bp-620: 620px;
  --bp-640: 640px;
  --bp-720: 720px;
  --bp-760: 760px;
  --bp-860: 860px;
  --bp-900: 900px;
  --bp-980: 980px;
  --bp-1024: 1024px;
  --bp-1100: 1100px;
  --fs-site-hero: clamp(28px, 11.66px + 4.19vw, 72px);
  --fs-site-h1: clamp(28px, 17.6px + 2.667vw, 56px);
  --fs-site-h2: clamp(24px, 18.06px + 1.524vw, 40px);
  --fs-site-h3: clamp(20px, 18.51px + 0.381vw, 24px);
  --fs-site-lead: clamp(17px, 15.89px + 0.286vw, 20px);
  --fs-site-hero-ar: clamp(28px, 14.63px + 3.429vw, 64px);
  --fs-site-h2-ar: clamp(24px, 19.54px + 1.143vw, 36px);
  --fs-site-lead-ar: clamp(17px, 16.26px + 0.19vw, 19px);
  --dur-press: 0.12s;
  --dur-state: 0.15s;
  --dur-land: 0.45s;
  --dur-node: 0.6s;
  --dur-sheet: 0.32s;
  --dur-ring: 0.5s;
  --dur-draw: 1.2s;
  --dur-travel: 6s;
  --dur-stagger: 60ms;
  --ease-draw: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-settle: cubic-bezier(0.3, 1.25, 0.6, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-travel: linear;
  --opacity-disabled: 0.4;
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Hanken Grotesk", Tahoma, "Noto Sans Arabic", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-hand: Caveat, "Segoe Print", cursive;
}
.site-hero { font-family: var(--font-display); font-size: 72px; line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; }
.site-h1 { font-family: var(--font-display); font-size: 56px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.site-h2 { font-family: var(--font-display); font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.site-h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.site-lead { font-family: var(--font-sans); font-size: 20px; line-height: 1.45; font-weight: 400; }
.site-body { font-family: var(--font-sans); font-size: 17px; line-height: 1.6; font-weight: 400; }
.site-label { font-family: var(--font-sans); font-size: 15px; line-height: 1.3; font-weight: 600; }
.site-button { font-family: var(--font-sans); font-size: 16px; line-height: 1; font-weight: 700; }
.site-small { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 500; }
.site-eyebrow { font-family: var(--font-sans); font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: 0.12em; }
.site-hero-ar { font-family: var(--font-arabic); font-size: 64px; line-height: 1.35; font-weight: 700; }
.site-h2-ar { font-family: var(--font-arabic); font-size: 36px; line-height: 1.45; font-weight: 700; }
.site-lead-ar { font-family: var(--font-arabic); font-size: 19px; line-height: 1.75; font-weight: 400; }
.site-body-ar { font-family: var(--font-arabic); font-size: 17px; line-height: 1.85; font-weight: 400; }
.site-small-ar { font-family: var(--font-arabic); font-size: 14px; line-height: 1.7; font-weight: 500; }
.app-h1 { font-family: var(--font-display); font-size: 36px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.app-h2 { font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.app-h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.app-stat { font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.app-title { font-family: var(--font-sans); font-size: 18px; line-height: 1.35; font-weight: 700; }
.app-lead { font-family: var(--font-sans); font-size: 18px; line-height: 1.55; font-weight: 400; }
.app-body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; }
.app-body-strong { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 600; }
.app-nav { font-family: var(--font-sans); font-size: 15px; line-height: 1.2; font-weight: 600; }
.app-button { font-family: var(--font-sans); font-size: 15px; line-height: 1; font-weight: 700; }
.app-label { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 600; }
.app-small { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 400; }
.app-eyebrow { font-family: var(--font-sans); font-size: 14px; line-height: 1.3; font-weight: 700; letter-spacing: 0.08em; }
.app-map-label { font-family: var(--font-sans); font-size: 15px; line-height: 1.22; font-weight: 600; }
.app-node { font-family: var(--font-display); font-size: 15px; line-height: 1; font-weight: 700; }
.app-h1-ar { font-family: var(--font-arabic); font-size: 32px; line-height: 1.45; font-weight: 700; }
.app-h2-ar { font-family: var(--font-arabic); font-size: 26px; line-height: 1.5; font-weight: 700; }
.app-body-ar { font-family: var(--font-arabic); font-size: 16px; line-height: 1.8; font-weight: 400; }
.app-label-ar { font-family: var(--font-arabic); font-size: 14px; line-height: 1.6; font-weight: 600; }
.app-small-ar { font-family: var(--font-arabic); font-size: 14px; line-height: 1.7; font-weight: 400; }
.brand-headline { font-family: var(--font-display); font-size: 120px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.brand-line { font-family: var(--font-display); font-size: 88px; line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; }
.brand-thumb { font-family: var(--font-display); font-size: 104px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.brand-end { font-family: var(--font-display); font-size: 104px; line-height: 1.02; font-weight: 700; letter-spacing: -0.025em; }
.brand-sub { font-family: var(--font-sans); font-size: 44px; line-height: 1.35; font-weight: 500; }
.brand-cta { font-family: var(--font-sans); font-size: 44px; line-height: 1; font-weight: 700; }
.brand-foot { font-family: var(--font-sans); font-size: 32px; line-height: 1.3; font-weight: 600; }
.brand-headline-ar { font-family: var(--font-arabic); font-size: 104px; line-height: 1.3; font-weight: 700; }
.brand-line-ar { font-family: var(--font-arabic); font-size: 80px; line-height: 1.35; font-weight: 700; }
.brand-thumb-ar { font-family: var(--font-arabic); font-size: 92px; line-height: 1.28; font-weight: 700; }
.brand-end-ar { font-family: var(--font-arabic); font-size: 92px; line-height: 1.35; font-weight: 700; }
.brand-sub-ar { font-family: var(--font-arabic); font-size: 42px; line-height: 1.7; font-weight: 500; }
.brand-cta-ar { font-family: var(--font-arabic); font-size: 40px; line-height: 1.2; font-weight: 700; }
.brand-foot-ar { font-family: var(--font-arabic); font-size: 32px; line-height: 1.6; font-weight: 600; }
.leo-quip { font-family: var(--font-hand); font-size: 24px; line-height: 1.15; font-weight: 600; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; font-weight: 400; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque-Latin-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Latin-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Latin-Variable-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/IBMPlexSansArabic-Arabic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/IBMPlexSansArabic-Arabic-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/IBMPlexSansArabic-Arabic-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/IBMPlexSansArabic-Arabic-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Latin-Variable.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/Caveat-Latin-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
