/* Clay Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --clay-primary: #0a0a0a;
  --clay-primary-active: #1f1f1f;
  --clay-primary-disabled: #e5e5e5;
  --clay-ink: #0a0a0a;
  --clay-body-strong: #1a1a1a;
  --clay-body: #3a3a3a;
  --clay-muted: #6a6a6a;
  --clay-muted-soft: #9a9a9a;
  --clay-hairline: #e5e5e5;
  --clay-hairline-soft: #f0f0f0;
  --clay-canvas: #fffaf0;
  --clay-surface-soft: #faf5e8;
  --clay-surface-card: #f5f0e0;
  --clay-surface-strong: #ebe6d6;
  --clay-surface-dark: #0a1a1a;
  --clay-surface-dark-elevated: #1a2a2a;
  --clay-on-primary: #ffffff;
  --clay-on-dark: #ffffff;
  --clay-on-dark-soft: #a0a0a0;
  --clay-pink: #ff4d8b;
  --clay-teal: #1a3a3a;
  --clay-lavender: #b8a4ed;
  --clay-peach: #ffb084;
  --clay-ochre: #e8b94a;
  --clay-mint: #a4d4c5;
  --clay-coral: #ff6b5a;
  --clay-success: #22c55e;
  --clay-warning: #f59e0b;
  --clay-error: #ef4444;
  --surface-page: var(--clay-canvas);
  --surface-soft: var(--clay-surface-soft);
  --surface-card: var(--clay-surface-card);
  --surface-strong: var(--clay-surface-strong);
  --surface-dark: var(--clay-surface-dark);
  --text-heading: var(--clay-ink);
  --text-body: var(--clay-body);
  --text-body-strong: var(--clay-body-strong);
  --text-muted: var(--clay-muted);
  --text-caption: var(--clay-muted-soft);
  --text-on-primary: var(--clay-on-primary);
  --text-on-dark: var(--clay-on-dark);
  --border-hairline: var(--clay-hairline);
  --border-focus: var(--clay-ink);
  --action-primary: var(--clay-primary);
  --action-primary-active: var(--clay-primary-active);
  --action-disabled: var(--clay-primary-disabled);
  --shadow-none: none;
  --shadow-hover: 0 6px 20px rgba(10,10,10,0.06);
}
:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --radius-full: 9999px;
  --container-max: 1280px;
  --nav-height: 64px;
  --control-height: 44px;
  --font-display: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.clay-display-xl { font-family: var(--font-display); font-size: 72px; line-height: 1; font-weight: 500; letter-spacing: -2.5px; }
.clay-display-lg { font-family: var(--font-display); font-size: 56px; line-height: 1.05; font-weight: 500; letter-spacing: -2px; }
.clay-display-md { font-family: var(--font-display); font-size: 40px; line-height: 1.1; font-weight: 500; letter-spacing: -1px; }
.clay-display-sm { font-family: var(--font-display); font-size: 32px; line-height: 1.15; font-weight: 500; letter-spacing: -0.5px; }
.clay-title-lg { font-family: var(--font-body); font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.3px; }
.clay-title-md { font-family: var(--font-body); font-size: 18px; line-height: 1.4; font-weight: 600; }
.clay-title-sm { font-family: var(--font-body); font-size: 16px; line-height: 1.4; font-weight: 600; }
.clay-body-md { font-family: var(--font-body); font-size: 16px; line-height: 1.55; font-weight: 400; }
.clay-body-sm { font-family: var(--font-body); font-size: 14px; line-height: 1.55; font-weight: 400; }
.clay-caption { font-family: var(--font-body); font-size: 13px; line-height: 1.4; font-weight: 500; }
.clay-eyebrow { font-family: var(--font-body); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 1.5px; }
.clay-button { font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.clay-nav-link { font-family: var(--font-body); font-size: 14px; font-weight: 500; }