/* Dennis van Drunen Design System — generated from tokens.json */
:root, [data-theme="default"] {
  --teal-50: #f3f8f9;
  --teal-100: #e9f1f1;
  --teal-200: #d2e4e5;
  --teal-400: #88b2b4;
  --teal-500: #6ba0a3;
  --teal-600: #478084;
  --teal-700: #3a5355;
  --teal-900: #1b4f54;
  --warm-50: #f7f1ee;
  --warm-100: #f0e8e5;
  --amber-50: #fdf4ec;
  --amber-100: #f7e3ce;
  --amber-500: #b05e0c;
  --amber-600: #96500a;
  --amber-700: #7c4108;
  --red-100: #fbe7e5;
  --red-600: #c0261f;
  --green-100: #e9f7f1;
  --green-600: #1d8659;
  --ink-900: #0a0a0a;
  --ink-800: #1a1a1a;
  --ink-600: #4a4a48;
  --white: #ffffff;
  --gray-100: #f5f4f1;
  --gray-200: #e4e3df;
  --surface-canvas: var(--white);
  --surface-band-cool: var(--teal-100);
  --surface-band-warm: var(--warm-100);
  --surface-band-mid: var(--teal-700);
  --surface-band-deep: var(--teal-900);
  --surface-card-on-tint: var(--white);
  --surface-card-on-white: var(--teal-100);
  --surface-anchor: var(--teal-500);
  --text-heading: var(--ink-900);
  --text-body: var(--ink-800);
  --text-secondary: var(--ink-600);
  --text-kicker: var(--teal-600);
  --text-link: var(--teal-900);
  --text-link-hover: var(--teal-700);
  --text-link-on-deep: var(--white);
  --text-link-on-deep-hover: var(--teal-200);
  --text-on-deep: var(--white);
  --text-on-anchor: var(--ink-900);
  --text-on-accent: var(--white);
  --text-danger: var(--red-600);
  --border-neutral: var(--gray-200);
  --border-tinted: var(--teal-200);
  --border-strong: var(--teal-700);
  --border-danger: var(--red-600);
  --border-success: var(--green-600);
  --text-success: var(--green-600);
  --surface-success: var(--green-100);
  --border-selected: var(--green-600);
  --surface-selected: var(--green-100);
  --marker-selected: var(--green-600);
  --text-on-selected: var(--white);
  --action-primary-bg: var(--amber-500);
  --action-primary-bg-hover: var(--amber-600);
  --action-primary-bg-active: var(--amber-700);
  --action-primary-text: var(--white);
  --action-on-deep-bg: var(--white);
  --action-on-deep-text: var(--teal-900);
  --action-secondary-border: var(--teal-700);
  --action-secondary-text: var(--teal-700);
  --status-win: var(--green-600);
  --status-win-bg: var(--green-100);
  --status-loss: var(--teal-700);
  --status-loss-bg: var(--teal-100);
  --status-running: var(--ink-600);
  --status-running-bg: var(--gray-100);
  --shadow-card: 0 2px 6px rgba(46,65,67,.06);
}
:root {
  --kicker-gap: 6px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --control-h: 48px;
  --container: 1120px;
  --prose: 760px;
  --grid-gutter: 32px;
  --header-h: 96px;
  --section-py: 96px;
  --section-py-sm: 56px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --weight-display: 800;
  --weight-semibold: 600;
  --weight-regular: 400;
  --bar-ratio: 1 / 1.36 / 1.73;
  --bar-gap: .33;
  --grid-cols: 12;
  --tracking-display: -0.02em;
  --font-display: "Inter",system-ui,sans-serif;
  --font-body: "Nunito Sans",system-ui,sans-serif;
  --text-text-display: 800 56px/60px var(--font-display);
  --text-text-h1: 800 40px/48px var(--font-display);
  --text-text-h2: 800 30px/38px var(--font-display);
  --text-text-h3: 800 22px/30px var(--font-display);
  --text-text-kicker: 800 19px/26px var(--font-display);
  --text-text-base: 400 18px/30px var(--font-body);
  --text-text-sm: 400 15px/24px var(--font-body);
  --text-text-label: 600 13px/18px var(--font-body);
}
.text-display {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 60px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.text-h1 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 48px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.text-h2 {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 38px;
  font-weight: 800;
  letter-spacing: 0;
}
.text-h3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 30px;
  font-weight: 800;
  letter-spacing: 0;
}
.text-kicker {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 26px;
  font-weight: 800;
  letter-spacing: 0;
}
.text-base {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.text-sm {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.text-label {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0;
}