/* GENERATED by tools/build_tokens.py from design/tokens/mersal.tokens.json — do not edit. */
:root {
  --color-brand-50: #e6f4f2;
  --color-brand-100: #c4e6e1;
  --color-brand-500: #00897b;
  --color-brand-600: #00766a;
  --color-brand-700: #00695c;
  --color-brand-900: #003d36;
  --color-ink-900: #0e1726;
  --color-ink-700: #344054;
  --color-ink-500: #5b6576;
  --color-ink-300: #98a2b3;
  --color-ink-placeholder: #8a94a6;
  --color-surface-canvas: #f5f7f8;
  --color-surface-card: #ffffff;
  --color-surface-sunken: #eef1f3;
  --color-surface-border: #e3e7eb;
  --color-surface-input: #ffffff;
  --color-surface-inverse: #0e1726;
  --color-surface-input-border: #8a94a3;
  --color-status-good: #0ca30c;
  --color-status-good-ink: #067647;
  --color-status-good-bg: #e8f6ec;
  --color-status-warning: #fab219;
  --color-status-warning-ink: #8a5a00;
  --color-status-warning-bg: #fff5dc;
  --color-status-critical: #d03b3b;
  --color-status-critical-ink: #b42318;
  --color-status-critical-bg: #fdecec;
  --color-status-info-ink: #1c5cab;
  --color-status-info-bg: #e8f1fc;
  --color-accent-sand: #c8a45c;
  --color-action-primary: #00695c;
  --color-action-primary-hover: #004d43;
  --color-action-on-primary: #ffffff;
  --color-focus-ring: #00897b;
  --color-side-bg: #0e1726;
  --color-side-ink: #c9d1dc;
  --color-side-muted: #8b97a8;
  --color-side-label: #7d899b;
  --color-side-border: #22304a;
  --color-side-active-ink: #ffffff;
  --color-side-accent: #3cc0b0;
  --font-family-sans: "Inter";
  --font-family-arabic: "IBM Plex Sans Arabic";
  --font-family-mono: "JetBrains Mono";
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 28px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --color-brand-50: #0f2d2a;
  --color-brand-500: #26a596;
  --color-brand-700: #3cc0b0;
  --color-brand-100: #1d4f49;
  --color-brand-600: #2bb3a3;
  --color-brand-900: #a5e6dd;
  --color-ink-900: #eef2f6;
  --color-ink-700: #cfd6df;
  --color-ink-500: #a3adbb;
  --color-ink-300: #6f7a8a;
  --color-ink-placeholder: #7c8798;
  --color-surface-canvas: #0b1220;
  --color-surface-card: #121b2b;
  --color-surface-sunken: #0e1626;
  --color-surface-border: #243044;
  --color-surface-input: #0b1322;
  --color-surface-inverse: #e6ebf1;
  --color-surface-input-border: #5a6a85;
  --color-action-primary: #2bb3a3;
  --color-action-primary-hover: #4fc7b8;
  --color-action-on-primary: #04201c;
  --color-focus-ring: #3cc0b0;
  --color-side-bg: #070c16;
  --color-side-border: #1b2638;
  --color-status-good-ink: #7ddc9f;
  --color-status-good-bg: #10291b;
  --color-status-warning-ink: #f5c86a;
  --color-status-warning-bg: #2c2210;
  --color-status-critical-ink: #f8a19a;
  --color-status-critical-bg: #351518;
  --color-status-info-ink: #94bdf6;
  --color-status-info-bg: #122340;
}
}
:root[data-theme="dark"] {
  --color-brand-50: #0f2d2a;
  --color-brand-500: #26a596;
  --color-brand-700: #3cc0b0;
  --color-brand-100: #1d4f49;
  --color-brand-600: #2bb3a3;
  --color-brand-900: #a5e6dd;
  --color-ink-900: #eef2f6;
  --color-ink-700: #cfd6df;
  --color-ink-500: #a3adbb;
  --color-ink-300: #6f7a8a;
  --color-ink-placeholder: #7c8798;
  --color-surface-canvas: #0b1220;
  --color-surface-card: #121b2b;
  --color-surface-sunken: #0e1626;
  --color-surface-border: #243044;
  --color-surface-input: #0b1322;
  --color-surface-inverse: #e6ebf1;
  --color-surface-input-border: #5a6a85;
  --color-action-primary: #2bb3a3;
  --color-action-primary-hover: #4fc7b8;
  --color-action-on-primary: #04201c;
  --color-focus-ring: #3cc0b0;
  --color-side-bg: #070c16;
  --color-side-border: #1b2638;
  --color-status-good-ink: #7ddc9f;
  --color-status-good-bg: #10291b;
  --color-status-warning-ink: #f5c86a;
  --color-status-warning-bg: #2c2210;
  --color-status-critical-ink: #f8a19a;
  --color-status-critical-bg: #351518;
  --color-status-info-ink: #94bdf6;
  --color-status-info-bg: #122340;
}