/* Punch UI Kit — generated from tokens.json by build.mjs. Do not edit; edit the JSON. */

:root, [data-theme="light"] {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --popover-foreground: #0a0a0a;
  --primary: #ff1449;
  --primary-foreground: #ffffff;
  --brand: var(--primary);
  --brand-strong: #d60037;
  --brand-dim: #ff144926;
  --brand-soft: #ff7096;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #e40014;
  --border: #e5e5e5;
  --border-strong: #d4d4d4;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --surface-1: var(--card);
  --surface-2: var(--muted);
  --success: #008138;
  --success-dim: #00c75833;
  --warning: #d97706;
  --warning-dim: #f59e0b26;
  --info: #0369a1;
  --info-dim: #0ea5e926;
  --chart-1: #7bf1a8;
  --chart-2: #00c758;
  --chart-3: #00a544;
  --chart-4: #008138;
  --chart-5: #016630;
  --sidebar: #111113;
  --sidebar-foreground: #fafafa;
  --sidebar-muted-foreground: #a1a1aa;
  --sidebar-accent: #232326;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #27272a;
  --sidebar-active-ring: #434343;
  --sidebar-mark-ring: #3f3f46;
  --wash: #dfe3ea;
  --beam-2: #7338e6;
  --beam-3: #22d3ee;
  --scrollbar-thumb: #0000002e;
}

[data-theme="dark"], .dark {
  color-scheme: dark;
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #171717;
  --card-foreground: #fafafa;
  --popover: #171717;
  --popover-foreground: #fafafa;
  --brand: var(--primary);
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a1a1a1;
  --accent: #262626;
  --accent-foreground: #fafafa;
  --destructive: #ff6568;
  --border: #ffffff1a;
  --border-strong: #ffffff33;
  --input: #ffffff26;
  --ring: #737373;
  --surface-1: var(--card);
  --surface-2: var(--muted);
  --success: #7bf1a8;
  --success-dim: #00c75840;
  --warning: #fbbf24;
  --info: #38bdf8;
  --wash: #94a3b829;
  --scrollbar-thumb: #ffffff33;
}

:root {
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-full: 9999px;

  /* layout */
  --sidebar-width: 256px;
  --sidebar-rail: 48px;
  --header-height: 56px;
  --page-max: 1280px;
  --reading-max: 768px;
  --panel-width: 352px;
  --description-max: 672px;

  /* shadow */
  --shadow-xs: 0 1px 2px 0 #0000000d;
  --shadow-lift: 0 10px 30px -12px #00000059;
}

/* Type styles. Eyebrows are uppercase by definition. */
.type-greeting {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.type-page-title {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.type-card-title {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.type-body-lg {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.type-body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.type-label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.type-small {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.type-tiny {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.type-stat-numeral {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 36px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.type-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.type-eyebrow-sm {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.type-ref {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.type-code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
}