/* QBS Labs design tokens v3: generated from tokens/tokens.json. Load fonts/fonts.css first. */
:root {
  color-scheme: light;
  --font-display: "Space Grotesk", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", Tahoma, sans-serif;
  --space-0: 0px;
  --space-0\.5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(24,21,19,.06);
  --shadow-sm: 0 1px 3px rgba(24,21,19,.08), 0 1px 2px rgba(24,21,19,.05);
  --shadow-md: 0 6px 16px -4px rgba(24,21,19,.12), 0 2px 4px -2px rgba(24,21,19,.06);
  --shadow-lg: 0 20px 48px -12px rgba(24,21,19,.22), 0 6px 16px -6px rgba(24,21,19,.10);
  --shadow-ember: 0 0 24px rgba(245,64,30,.40);
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --touch-min: 44px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --container-max: 1200px;
  --container-prose: 680px;
  --gutter-mobile: 16px;
  --gutter-desktop: 32px;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
  --duration-deliberate: 400ms;
  --ease-spark: cubic-bezier(.2,.8,.2,1);
  --ease-exit: cubic-bezier(.4,0,1,1);
  --ease-move: cubic-bezier(.65,0,.35,1);
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
  --ember-50: #fff0e3;
  --ember-100: #ffe0ce;
  --ember-200: #ffc6ad;
  --ember-300: #ffa17f;
  --ember-400: #ff6e45;
  --ember-500: #f5401e;
  --ember-600: #ce2c08;
  --ember-700: #a72309;
  --ember-800: #7f1d0c;
  --ember-900: #5c1407;
  --ember-950: #331812;
  --ash-0: #ffffff;
  --ash-25: #fdfbf9;
  --ash-50: #f7f5f4;
  --ash-100: #edebea;
  --ash-200: #dcdad8;
  --ash-300: #c4c2c0;
  --ash-400: #a8a5a4;
  --ash-500: #8e8b8a;
  --ash-600: #6f6d6b;
  --ash-700: #5c5957;
  --ash-800: #444240;
  --ash-850: #34312f;
  --ash-900: #272422;
  --ash-925: #1f1c1a;
  --ash-950: #181513;
  --ash-975: #120f0d;
  --signal-50: #e9f8ff;
  --signal-100: #dbedff;
  --signal-200: #c5dbfc;
  --signal-300: #a3c3f4;
  --signal-400: #7ba7ef;
  --signal-500: #548ae8;
  --signal-600: #376dd5;
  --signal-700: #2555b6;
  --signal-800: #193f91;
  --signal-900: #102c6b;
  --signal-950: #152036;
  --glow-50: #fff3ca;
  --glow-100: #ffe4a6;
  --glow-200: #ffcd68;
  --glow-300: #feaf1e;
  --glow-400: #e29300;
  --glow-500: #c17a16;
  --glow-600: #9d6428;
  --glow-700: #7d512a;
  --glow-800: #5f3d24;
  --glow-900: #452a18;
  --glow-950: #31190c;
  --green-50: #e6feee;
  --green-100: #d7f3e1;
  --green-200: #bee4cc;
  --green-300: #97d0ae;
  --green-400: #66bb8d;
  --green-500: #32a370;
  --green-600: #008959;
  --green-700: #006f46;
  --green-800: #005636;
  --green-900: #003d26;
  --green-950: #082719;
  --crimson-50: #ffeeef;
  --crimson-100: #ffe0e2;
  --crimson-200: #fdcace;
  --crimson-300: #f3aab2;
  --crimson-400: #eb8192;
  --crimson-500: #df5675;
  --crimson-600: #c72e5d;
  --crimson-700: #a81048;
  --crimson-800: #850036;
  --crimson-900: #620025;
  --crimson-950: #32171c;
  --bg-page: var(--ash-25);
  --bg-surface: var(--ash-0);
  --bg-raised: var(--ash-0);
  --bg-sunken: var(--ash-50);
  --bg-inverse: var(--ash-950);
  --border-subtle: var(--ash-100);
  --border-strong: var(--ash-200);
  --border-control: var(--ash-500);
  --text-primary: var(--ash-950);
  --text-secondary: var(--ash-700);
  --text-tertiary: var(--ash-600);
  --text-disabled: var(--ash-300);
  --text-inverse: var(--ash-25);
  --text-on-accent: var(--ash-0);
  --text-accent: var(--ember-700);
  --text-link: var(--signal-700);
  --accent: var(--ember-600);
  --accent-hover: var(--ember-700);
  --accent-pressed: var(--ember-800);
  --accent-subtle: var(--ember-50);
  --brand: var(--ember-500);
  --focus-ring: var(--signal-600);
  --info: var(--signal-600);
  --text-info: var(--signal-700);
  --info-subtle: var(--signal-50);
  --success: var(--green-700);
  --text-success: var(--green-700);
  --success-subtle: var(--green-50);
  --warning: var(--glow-300);
  --text-warning: var(--glow-700);
  --warning-subtle: var(--glow-50);
  --danger: var(--crimson-700);
  --text-danger: var(--crimson-700);
  --danger-subtle: var(--crimson-50);
  --highlight: var(--glow-300);
  --data-1: var(--ember-500);
  --data-2: var(--signal-500);
  --data-3: var(--glow-300);
  --data-4: var(--green-500);
  --data-muted: var(--ash-300);
  --chalk: var(--ash-25);
  --ink: var(--ash-950);
}

/* Dark theme: follows the OS unless data-theme="light" is set; force it with data-theme="dark" on <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-page: var(--ash-950);
    --bg-surface: var(--ash-925);
    --bg-raised: var(--ash-900);
    --bg-sunken: var(--ash-975);
    --bg-inverse: var(--ash-25);
    --border-subtle: var(--ash-850);
    --border-strong: var(--ash-800);
    --border-control: var(--ash-500);
    --text-primary: var(--ash-50);
    --text-secondary: var(--ash-300);
    --text-tertiary: var(--ash-400);
    --text-disabled: var(--ash-700);
    --text-inverse: var(--ash-950);
    --text-on-accent: var(--ash-0);
    --text-accent: var(--ember-300);
    --text-link: var(--signal-300);
    --accent: var(--ember-600);
    --accent-hover: var(--ember-700);
    --accent-pressed: var(--ember-800);
    --accent-subtle: var(--ember-950);
    --brand: var(--ember-500);
    --focus-ring: var(--signal-300);
    --info: var(--signal-600);
    --text-info: var(--signal-300);
    --info-subtle: var(--signal-950);
    --success: var(--green-700);
    --text-success: var(--green-300);
    --success-subtle: var(--green-950);
    --warning: var(--glow-300);
    --text-warning: var(--glow-300);
    --warning-subtle: var(--glow-950);
    --danger: var(--crimson-700);
    --text-danger: var(--crimson-300);
    --danger-subtle: var(--crimson-950);
    --highlight: var(--glow-300);
    --data-1: var(--ember-500);
    --data-2: var(--signal-400);
    --data-3: var(--glow-300);
    --data-4: var(--green-400);
    --data-muted: var(--ash-700);
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 0 0 1px rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.5);
    --shadow-md: 0 0 0 1px rgba(255,255,255,.06), 0 8px 20px -4px rgba(0,0,0,.6);
    --shadow-lg: 0 0 0 1px rgba(255,255,255,.07), 0 24px 56px -12px rgba(0,0,0,.75);
    --shadow-ember: 0 0 28px rgba(245,64,30,.50);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: var(--ash-950);
  --bg-surface: var(--ash-925);
  --bg-raised: var(--ash-900);
  --bg-sunken: var(--ash-975);
  --bg-inverse: var(--ash-25);
  --border-subtle: var(--ash-850);
  --border-strong: var(--ash-800);
  --border-control: var(--ash-500);
  --text-primary: var(--ash-50);
  --text-secondary: var(--ash-300);
  --text-tertiary: var(--ash-400);
  --text-disabled: var(--ash-700);
  --text-inverse: var(--ash-950);
  --text-on-accent: var(--ash-0);
  --text-accent: var(--ember-300);
  --text-link: var(--signal-300);
  --accent: var(--ember-600);
  --accent-hover: var(--ember-700);
  --accent-pressed: var(--ember-800);
  --accent-subtle: var(--ember-950);
  --brand: var(--ember-500);
  --focus-ring: var(--signal-300);
  --info: var(--signal-600);
  --text-info: var(--signal-300);
  --info-subtle: var(--signal-950);
  --success: var(--green-700);
  --text-success: var(--green-300);
  --success-subtle: var(--green-950);
  --warning: var(--glow-300);
  --text-warning: var(--glow-300);
  --warning-subtle: var(--glow-950);
  --danger: var(--crimson-700);
  --text-danger: var(--crimson-300);
  --danger-subtle: var(--crimson-950);
  --highlight: var(--glow-300);
  --data-1: var(--ember-500);
  --data-2: var(--signal-400);
  --data-3: var(--glow-300);
  --data-4: var(--green-400);
  --data-muted: var(--ash-700);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 0 0 1px rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 0 0 1px rgba(255,255,255,.06), 0 8px 20px -4px rgba(0,0,0,.6);
  --shadow-lg: 0 0 0 1px rgba(255,255,255,.07), 0 24px 56px -12px rgba(0,0,0,.75);
  --shadow-ember: 0 0 28px rgba(245,64,30,.50);
}

/* Type styles: use these classes (or copy the declarations). Never set sizes by hand. */
.t-display-xl { font-family: var(--font-display); font-size: 72px; line-height: 76px; font-weight: 600; letter-spacing: -0.03em; }
.t-display-l { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.025em; }
.t-display-m { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; }
.t-heading-1 { font-family: var(--font-display); font-size: 36px; line-height: 42px; font-weight: 600; letter-spacing: -0.02em; }
.t-heading-2 { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.015em; }
.t-heading-3 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.t-heading-4 { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; }
.t-body-l { font-family: var(--font-sans); font-size: 18px; line-height: 30px; font-weight: 400; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.t-body-s { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.t-caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: 0.005em; }
.t-button { font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 500; }
.t-label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.t-code { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; }
.t-data { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.t-ar-display { font-family: var(--font-arabic); font-size: 64px; line-height: 84px; font-weight: 600; }
.t-ar-heading-1 { font-family: var(--font-arabic); font-size: 38px; line-height: 56px; font-weight: 600; }
.t-ar-heading-2 { font-family: var(--font-arabic); font-size: 30px; line-height: 44px; font-weight: 600; }
.t-ar-heading-3 { font-family: var(--font-arabic); font-size: 24px; line-height: 36px; font-weight: 600; }
.t-ar-body-l { font-family: var(--font-arabic); font-size: 20px; line-height: 36px; font-weight: 400; }
.t-ar-body { font-family: var(--font-arabic); font-size: 18px; line-height: 32px; font-weight: 400; }
.t-ar-body-s { font-family: var(--font-arabic); font-size: 15px; line-height: 26px; font-weight: 400; }
.t-ar-label { font-family: var(--font-arabic); font-size: 13px; line-height: 20px; font-weight: 500; }
.t-ar-button { font-family: var(--font-arabic); font-size: 16px; line-height: 22px; font-weight: 500; }