:root, [data-theme="light"] {
  --surface-100: #ffffff;
  --surface-200: #f4f4f4;
  --surface-300: #e9e9e9;
  --ink: #0d0d0d;
  --ink-muted: #6b6b6b;
  --border: #e2e2e2;
  --accent: #d9ae30;
  --accent-strong: #a67232;
  --accent-tint: #d9af62;
  --shadow-card: 0 1px 0 rgba(13,13,13,0.08);
}

[data-theme="dark"] {
  --surface-100: #0d0d0d;
  --surface-200: #171717;
  --surface-300: #212121;
  --ink: #f5f5f5;
  --ink-muted: #a3a3a3;
  --border: #2a2a2a;
  --accent: #d99e30;
  --accent-strong: #d9af62;
  --accent-tint: #a67232;
  --shadow-card: 0 1px 0 rgba(13,13,13,0.08);
}

:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
}

.display-xl {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1.05;
  font-weight: 700;
}

.display-lg {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
}

.display-md {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
}

.display-sm {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}

.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
}

.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}

.body-sm {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
}

.label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
}