@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Sans+Arabic:wght@400;500;700&display=swap");
:root {
  --bg: #0A0D0B;
  --surface: #121714;
  --surface-2: #1A211D;
  --line: #26302A;
  --ink: #F2F5F3;
  --ink-muted: #9AA59F;
  --neon: #3DFF8A;
  --neon-ink: #3DFF8A;
  --on-neon: #0A0D0B;
  --danger: #FF5C5C;
  --warning: #FFC24D;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --text-display: 700 56px/60px var(--font-display);
  --text-title: 700 28px/34px var(--font-display);
  --text-stat: 500 22px/26px var(--font-display);
  --text-heading: 700 18px/26px var(--font-sans);
  --text-body: 400 15px/24px var(--font-sans);
  --text-label: 500 13px/18px var(--font-sans);
  --text-caption: 400 12px/16px var(--font-sans);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-pill: 999px;
}
[data-theme="light"] {
  --bg: #F2F5F3;
  --surface: #FFFFFF;
  --surface-2: #E6ECE8;
  --line: #CED8D2;
  --ink: #0A0D0B;
  --ink-muted: #4E5A53;
  --neon: #3DFF8A;
  --neon-ink: #0B7A3B;
  --on-neon: #0A0D0B;
  --danger: #C42B2B;
  --warning: #8A5800;
}