/* GENERATED from docs/design-system/ by scripts/design-system.mjs. Do not edit. */

/* fonts: self-hosted (web/fonts, SIL Open Font License) */
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/Geist-Latin.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:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/Geist-LatinExt.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/IBMPlexSansArabic-Medium.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/IBMPlexSansArabic-Bold.ttf") format("truetype")}

:root{
  color-scheme:light;
  /* colour */
  --canvas:#f5f5f7; --surface:#ffffff; --surface-muted:#ececef; --ink:#1d1d1f; --ink-secondary:#6e6e73; --ink-tertiary:#86868b; --on-ink:#ffffff; --hairline:#0000001a; --blue-100:#e6f2fc; --blue-300:#9fcdf3; --blue-500:#2575d3; --blue-200:#cfe7fa; --accent:#0a5fc2; --on-accent:#ffffff; --coral:#d43a4a; --glass:rgba(255, 255, 255, 0.22); --glass-edge:rgba(255, 255, 255, 0.45); --success:#1e7f4a; --danger:#c9302c;
  /* type families */
  --font-display:Geist, "SF Pro Display", -apple-system, system-ui, sans-serif; --font-text:Geist, "SF Pro Text", -apple-system, system-ui, sans-serif; --font-arabic:"IBM Plex Sans Arabic", "SF Arabic", Tahoma, sans-serif;
  /* type styles: font shorthand, then tracking */
  --type-display-xl:600 80px/80px var(--font-display); --tracking-display-xl:-0.035em;
  --type-display-l:600 56px/60px var(--font-display); --tracking-display-l:-0.03em;
  --type-headline:600 40px/46px var(--font-display); --tracking-headline:-0.025em;
  --type-title:600 28px/34px var(--font-display); --tracking-title:-0.02em;
  --type-title-s:600 20px/26px var(--font-text); --tracking-title-s:-0.01em;
  --type-body-l:400 19px/28px var(--font-text); --tracking-body-l:0;
  --type-body:400 16px/24px var(--font-text); --tracking-body:0;
  --type-caption:500 13px/18px var(--font-text); --tracking-caption:0;
  --type-eyebrow:600 11px/14px var(--font-text); --tracking-eyebrow:0.08em;
  --type-ar-display:700 64px/84px var(--font-arabic); --tracking-ar-display:0;
  --type-ar-title:600 28px/42px var(--font-arabic); --tracking-ar-title:0;
  --type-ar-body:400 17px/30px var(--font-arabic); --tracking-ar-body:0;
  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px; --space-32:128px;
  /* radius */
  --radius-s:10px; --radius-m:16px; --radius-l:24px; --radius-xl:32px; --radius-pill:999px;
  /* shadow */
  --shadow-card:0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-float:0 24px 60px rgba(10, 40, 90, 0.18);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  color-scheme:dark;
  --canvas:#000000; --surface:#1c1c1e; --surface-muted:#2c2c2e; --ink:#f5f5f7; --ink-secondary:#a1a1a6; --ink-tertiary:#8e8e93; --on-ink:#1d1d1f; --hairline:#ffffff24; --blue-100:#0b2e59; --blue-300:#2a5f9e; --blue-500:#2575d3; --blue-200:#0e3a6b; --accent:#4aa3f5; --on-accent:#00182f; --coral:#d43a4a; --glass:rgba(255, 255, 255, 0.10); --glass-edge:rgba(255, 255, 255, 0.22); --success:#4cc38a; --danger:#ff6b61;
  --shadow-card:0 0 0 1px rgba(255, 255, 255, 0.08); --shadow-float:0 24px 60px rgba(0, 0, 0, 0.6);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#000000; --surface:#1c1c1e; --surface-muted:#2c2c2e; --ink:#f5f5f7; --ink-secondary:#a1a1a6; --ink-tertiary:#8e8e93; --on-ink:#1d1d1f; --hairline:#ffffff24; --blue-100:#0b2e59; --blue-300:#2a5f9e; --blue-500:#2575d3; --blue-200:#0e3a6b; --accent:#4aa3f5; --on-accent:#00182f; --coral:#d43a4a; --glass:rgba(255, 255, 255, 0.10); --glass-edge:rgba(255, 255, 255, 0.22); --success:#4cc38a; --danger:#ff6b61;
  --shadow-card:0 0 0 1px rgba(255, 255, 255, 0.08); --shadow-float:0 24px 60px rgba(0, 0, 0, 0.6);
}

/* type styles, by the system's names */
.display-xl{font:var(--type-display-xl);letter-spacing:var(--tracking-display-xl)}
.display-l{font:var(--type-display-l);letter-spacing:var(--tracking-display-l)}
.headline{font:var(--type-headline);letter-spacing:var(--tracking-headline)}
.title{font:var(--type-title);letter-spacing:var(--tracking-title)}
.title-s{font:var(--type-title-s);letter-spacing:var(--tracking-title-s)}
.body-l{font:var(--type-body-l);letter-spacing:var(--tracking-body-l)}
.body{font:var(--type-body);letter-spacing:var(--tracking-body)}
.caption{font:var(--type-caption);letter-spacing:var(--tracking-caption)}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}
.ar-display{font:var(--type-ar-display);letter-spacing:var(--tracking-ar-display)}
.ar-title{font:var(--type-ar-title);letter-spacing:var(--tracking-ar-title)}
.ar-body{font:var(--type-ar-body);letter-spacing:var(--tracking-ar-body)}
.display-xl:lang(ar){font:var(--type-ar-display);letter-spacing:0}
.display-l:lang(ar){font:var(--type-ar-display);letter-spacing:0}
.headline:lang(ar){font-family:var(--font-arabic);letter-spacing:0;text-transform:none}
.title:lang(ar){font:var(--type-ar-title);letter-spacing:0}
.title-s:lang(ar){font-family:var(--font-arabic);letter-spacing:0;text-transform:none}
.body-l:lang(ar){font-family:var(--font-arabic);letter-spacing:0;text-transform:none}
.body:lang(ar){font:var(--type-ar-body);letter-spacing:0}
.caption:lang(ar){font-family:var(--font-arabic);letter-spacing:0;text-transform:none}
.eyebrow:lang(ar){font-family:var(--font-arabic);letter-spacing:0;text-transform:none}