/* SupaHuman Design System — generated from tokens.json */

@font-face { font-family: "Geomanist"; src: url("fonts/Geomanist-Regular.ttf"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Regular.woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Medium.woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-SemiBold.woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Medium.woff2"); font-weight: 500; font-style: normal; font-display: swap; }
:root, [data-theme="light"] {
  --blue-050: #0b66c3;
  --blue-000: #0a58a8;
  --dark-bg-050: #0b1430;
  --heading-100: #2d3748;
  --heading-200: #47505f;
  --heading-300: #626976;
  --heading-400: #7c828d;
  --heading-500: #969ba4;
  --heading-600: #b0b4ba;
  --heading-700: #cbcdd1;
  --heading-800: #e5e6e8;
  --body-100: #4a5568;
  --body-200: #616a7b;
  --body-300: #77808e;
  --body-400: #8e95a1;
  --body-500: #a5aab4;
  --body-600: #bbbfc6;
  --body-700: #d2d5d9;
  --body-800: #e8eaec;
  --muted-100: #718096;
  --muted-200: #8390a3;
  --muted-300: #95a0b0;
  --muted-400: #a6b0bd;
  --muted-500: #b8c0cb;
  --muted-600: #cacfd8;
  --muted-700: #dcdfe5;
  --muted-800: #edeff2;
  --black-100: #000000;
  --black-200: #202020;
  --black-300: #404040;
  --black-400: #606060;
  --black-500: #808080;
  --black-600: #9f9f9f;
  --black-700: #bfbfbf;
  --black-800: #dfdfdf;
  --blue-100: #1890ff;
  --blue-200: #359eff;
  --blue-300: #52acff;
  --blue-400: #6fbaff;
  --blue-500: #8cc8ff;
  --blue-600: #a8d5ff;
  --blue-700: #c5e3ff;
  --blue-800: #e2f1ff;
  --violet-100: #7423f9;
  --violet-200: #853ffa;
  --violet-300: #975afb;
  --violet-400: #a876fb;
  --violet-500: #ba91fc;
  --violet-600: #cbadfd;
  --violet-700: #dcc8fe;
  --violet-800: #eee4fe;
  --pink-100: #fb0088;
  --pink-200: #fc2097;
  --pink-300: #fc40a6;
  --pink-400: #fd60b5;
  --pink-500: #fd80c4;
  --pink-600: #fe9fd2;
  --pink-700: #febfe1;
  --pink-800: #ffdff0;
  --peach-100: #ffba94;
  --peach-200: #ffc3a1;
  --peach-300: #ffcbaf;
  --peach-400: #ffd4bc;
  --peach-500: #ffddca;
  --peach-600: #ffe5d7;
  --peach-700: #ffeee4;
  --peach-800: #fff6f2;
  --dark-bg-100: #0f1a36;
  --dark-bg-200: #2d374f;
  --dark-bg-300: #4b5368;
  --dark-bg-400: #697081;
  --dark-bg-500: #878d9b;
  --dark-bg-600: #a5a9b4;
  --dark-bg-700: #c3c6cd;
  --dark-bg-800: #e1e2e6;
  --light-bg-100: #f8f9fc;
  --light-bg-200: #f9fafc;
  --light-bg-300: #fafbfd;
  --light-bg-400: #fbfbfd;
  --light-bg-500: #fcfcfe;
  --light-bg-600: #fcfdfe;
  --light-bg-700: #fdfefe;
  --light-bg-800: #fefeff;
  --bg-page: #ffffff;
  --bg-subtle: #f8f9fc;
  --bg-surface: #ffffff;
  --bg-surface-2: #f8f9fc;
  --bg-surface-sunken: #edeff2;
  --bg-dark: #0f1a36;
  --bg-dark-surface: #18244a;
  --bg-dark-surface-2: #1a2544;
  --fg-1: #0f1a36;
  --fg-2: #4a5568;
  --fg-3: #626976;
  --fg-4: #77808e;
  --fg-inverse: #ffffff;
  --fg-on-dark: #f8f9fc;
  --fg-on-dark-muted: #a5a9b4;
  --border-subtle: #e5e6e8;
  --border-default: #d2d5d9;
  --border-strong: #b0b4ba;
  --border-dark: #2d374f;
  --brand-primary: var(--blue-100);
  --brand-accent-pink: var(--pink-100);
  --brand-accent-violet: var(--violet-100);
  --brand-accent-peach: var(--peach-100);
  --action: var(--blue-050);
  --action-hover: var(--blue-000);
  --on-action: #ffffff;
  --product-vetos: var(--blue-100);
  --product-vetos-text: var(--blue-050);
  --product-vetos-tint: #e2f1ff;
  --product-nova: var(--violet-100);
  --product-nova-text: var(--violet-100);
  --product-nova-tint: #eee4fe;
  --product-studio: #0f1a36;
  --product-studio-tint: #edeff2;
  --state-success: #10b981;
  --state-warning: #f59e0b;
  --state-danger: var(--pink-100);
  --state-info: var(--blue-100);
  --success-bg: #e6f7ef;
  --success-fg: #087146;
  --warning-bg: #fef3dc;
  --warning-fg: #8a5a0a;
  --danger-bg: #ffdff0;
  --danger-fg: #b00460;
  --info-bg: #e2f1ff;
  --info-fg: #0b66c3;
  --ai-bg: #eee4fe;
  --ai-fg: #5a17bd;
  --neutral-bg: #edeff2;
  --neutral-fg: #4a5568;
  --shadow-ring: 0 0 0 1px rgba(15,26,54,0.08);
  --shadow-xs: 0 1px 2px rgba(15,26,54,0.05);
  --shadow-sm: 0 1px 2px rgba(15,26,54,0.04), 0 2px 8px rgba(15,26,54,0.05);
  --shadow-md: 0 4px 12px rgba(15,26,54,0.06), 0 1px 3px rgba(15,26,54,0.05);
  --shadow-lg: 0 12px 32px rgba(15,26,54,0.10), 0 2px 6px rgba(15,26,54,0.05);
  --shadow-xl: 0 32px 64px rgba(15,26,54,0.14), 0 8px 20px rgba(15,26,54,0.06);
  --shadow-inset: inset 0 1px 2px rgba(15,26,54,0.06);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #1890FF;
}
[data-theme="dark"] {
  --bg-page: #0b1430;
  --bg-subtle: #0f1a36;
  --bg-surface: #121d3b;
  --bg-surface-2: #18244a;
  --bg-surface-sunken: #0a1229;
  --bg-dark: #0f1a36;
  --bg-dark-surface: #18244a;
  --bg-dark-surface-2: #1a2544;
  --fg-1: #f8f9fc;
  --fg-2: #c3c6cd;
  --fg-3: #a5a9b4;
  --fg-4: #8e95a1;
  --fg-inverse: #0f1a36;
  --fg-on-dark: #f8f9fc;
  --fg-on-dark-muted: #a5a9b4;
  --border-subtle: #1f2a4a;
  --border-default: #2d374f;
  --border-strong: #4b5368;
  --border-dark: #2d374f;
  --brand-primary: var(--blue-300);
  --brand-accent-pink: var(--pink-300);
  --brand-accent-violet: var(--violet-400);
  --brand-accent-peach: var(--peach-100);
  --action: var(--blue-300);
  --action-hover: var(--blue-200);
  --on-action: #0f1a36;
  --product-vetos: var(--blue-300);
  --product-vetos-text: var(--blue-300);
  --product-vetos-tint: rgba(82,172,255,0.14);
  --product-nova: var(--violet-400);
  --product-nova-text: var(--violet-400);
  --product-nova-tint: rgba(168,118,251,0.16);
  --product-studio: #f8f9fc;
  --product-studio-tint: rgba(248,249,252,0.08);
  --state-success: #34d399;
  --state-warning: #fbbf24;
  --state-danger: var(--pink-300);
  --state-info: var(--blue-300);
  --success-bg: rgba(52,211,153,0.14);
  --success-fg: #6ee7b7;
  --warning-bg: rgba(251,191,36,0.14);
  --warning-fg: #fcd34d;
  --danger-bg: rgba(253,96,181,0.16);
  --danger-fg: #fd80c4;
  --info-bg: rgba(111,186,255,0.14);
  --info-fg: #8cc8ff;
  --ai-bg: rgba(168,118,251,0.16);
  --ai-fg: #cbadfd;
  --neutral-bg: rgba(248,249,252,0.08);
  --neutral-fg: #c3c6cd;
  --shadow-ring: 0 0 0 1px rgba(255,255,255,0.08);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
  --shadow-xl: 0 32px 64px rgba(0,0,0,0.6);
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,0.4);
  --focus-ring: 0 0 0 2px #0B1430, 0 0 0 4px #52ACFF;
}
:root {
  --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-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --font-heading: "Geomanist", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.display-xl { font-family: var(--font-heading); font-size: 72px; line-height: 1.0; font-weight: 400; letter-spacing: -0.035em; }
.display { font-family: var(--font-heading); font-size: 56px; line-height: 1.04; font-weight: 400; letter-spacing: -0.03em; }
.h1 { font-family: var(--font-heading); font-size: 44px; line-height: 1.1; font-weight: 400; letter-spacing: -0.025em; }
.h2 { font-family: var(--font-heading); font-size: 34px; line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; }
.h3 { font-family: var(--font-heading); font-size: 24px; line-height: 1.25; font-weight: 400; letter-spacing: -0.015em; }
.h4 { font-family: var(--font-heading); font-size: 19px; line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; }
.metric { font-family: var(--font-heading); font-size: 40px; line-height: 1.0; font-weight: 400; letter-spacing: -0.03em; }
.lead { font-family: var(--font-body); font-size: 20px; line-height: 1.55; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; font-weight: 400; }
.body-sm { font-family: var(--font-body); font-size: 14px; line-height: 1.5; font-weight: 400; }
.ui { font-family: var(--font-body); font-size: 14px; line-height: 1.43; font-weight: 500; }
.title-sm { font-family: var(--font-body); font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: -0.005em; }
.body-strong { font-family: var(--font-body); font-size: 16px; line-height: 1.6; font-weight: 600; }
.caption { font-family: var(--font-body); font-size: 12px; line-height: 1.45; font-weight: 400; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 1.33; font-weight: 500; letter-spacing: 0.08em; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; font-weight: 400; }