/* Elevanta tokens scoped to .el-scope so they do not override the Skillful Hands variables. Generated from tokens.css. */
/* Elevanta Labs design tokens. Default theme: graphite (dark). Set data-theme="paper" on <html> for the light theme. */
.el-scope {
  --surface-0: #0e0f11;
  --surface-1: #16171a;
  --surface-2: #1f2024;
  --line: #2a2b30;
  --line-strong: #6a6b72;
  --ink: #ededef;
  --ink-2: #a1a2a8;
  --ink-3: #8a8b91;
  --signal: #7c6cff;
  --signal-strong: #5e4bf0;
  --signal-ink: #a99fff;
  --signal-soft: #211d3d;
  --on-signal: #ffffff;
  --positive: #4cc38a;
  --negative: #ff8a7a;
}
.el-scope[data-theme="paper"] {
  --surface-0: #f7f7f8;
  --surface-1: #ffffff;
  --surface-2: #efeff1;
  --line: #dcdce0;
  --line-strong: #8e8f96;
  --ink: #111214;
  --ink-2: #55565c;
  --ink-3: #6a6b71;
  --signal: #6252f0;
  --signal-strong: #5241e6;
  --signal-ink: #4434d6;
  --signal-soft: #ecebfe;
  --on-signal: #ffffff;
  --positive: #1a7a50;
  --negative: #b42c20;
}
.el-scope {
  --font-display: "Inter Tight Variable", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --container: 1200px;
  --measure: 680px;
  --hairline: 1px;
}
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; }
.display { font-family: var(--font-display); font-size: 48px; line-height: 1.08; font-weight: 500; letter-spacing: -0.025em; }
.h1 { font-family: var(--font-display); font-size: 36px; line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; }
.h3 { font-family: var(--font-display); font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.body-lg { font-family: var(--font-display); font-size: 18px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-display); font-size: 16px; line-height: 1.6; font-weight: 400; }
.small { font-family: var(--font-display); font-size: 14px; line-height: 1.5; font-weight: 400; }
.button { font-family: var(--font-display); font-size: 15px; line-height: 1; font-weight: 500; letter-spacing: -0.005em; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.data { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; font-weight: 400; }
.metric { font-family: var(--font-mono); font-size: 56px; line-height: 1; font-weight: 400; letter-spacing: -0.03em; }