:root {
  /* Primary brand: indigo */
  --survey-primary-50: #eef2ff;
  --survey-primary-100: #e0e7ff;
  --survey-primary-200: #c7d2fe;
  --survey-primary-300: #a5b4fc;
  --survey-primary-400: #818cf8;
  --survey-primary-500: #6366f1;
  --survey-primary-600: #4f46e5;
  --survey-primary-700: #4338ca;
  --survey-primary-800: #3730a3;
  --survey-primary-900: #312e81;

  /* Neutral gray */
  --survey-gray-50: #f8fafc;
  --survey-gray-100: #f1f5f9;
  --survey-gray-200: #e2e8f0;
  --survey-gray-300: #cbd5e1;
  --survey-gray-400: #94a3b8;
  --survey-gray-500: #64748b;
  --survey-gray-600: #475569;
  --survey-gray-700: #334155;
  --survey-gray-800: #1e293b;
  --survey-gray-900: #0f172a;

  /* Semantic tokens */
  --survey-background: #ffffff;
  --survey-foreground: #0f172a;
  --survey-card: #ffffff;
  --survey-card-foreground: #0f172a;
  --survey-popover: #ffffff;
  --survey-popover-foreground: #0f172a;
  --survey-primary: #4f46e5;
  --survey-primary-foreground: #ffffff;
  --survey-muted: #f1f5f9;
  --survey-muted-foreground: #64748b;
  --survey-border: #e2e8f0;
  --survey-input: #e2e8f0;
  --survey-ring: #6366f1;

  /* Surface hierarchy */
  --survey-surface: #ffffff;
  --survey-surface-2: #f8fafc;
  --survey-surface-3: #f1f5f9;
  --survey-bg: #ffffff;
  --survey-ink: #0f172a;
  --survey-ink-2: #475569;
  --survey-ink-3: #64748b;
  --survey-line: #e2e8f0;
  --survey-brand: #4f46e5;
  --survey-brand-ink: #ffffff;

  /* State colors */
  --survey-state-success: #10b981;
  --survey-state-warning: #f59e0b;
  --survey-state-error: #ef4444;
  --survey-state-info: #3b82f6;

  /* Radius */
  --survey-radius-sm: 4px;
  --survey-radius-md: 8px;
  --survey-radius-lg: 16px;
  --survey-radius-full: 9999px;

  /* Shadows */
  --survey-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
  --survey-shadow-2: 0 8px 24px -8px rgba(15, 23, 42, 0.18);
  --survey-shadow-3: 0 24px 60px -20px rgba(15, 23, 42, 0.30);

  /* Spacing */
  --survey-s-1: 4px;
  --survey-s-2: 8px;
  --survey-s-3: 12px;
  --survey-s-4: 16px;
  --survey-s-5: 24px;
  --survey-s-6: 32px;
  --survey-s-7: 48px;
  --survey-s-8: 80px;

  /* Typography */
  --survey-font-primary: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --survey-font-mono: "SF Mono", "Fira Code", "JetBrains Mono", monospace;

  /* Semantic aliases required by head contract */
  --survey-color-background: var(--survey-background);
  --survey-color-foreground: var(--survey-foreground);
  --survey-color-card: var(--survey-card);
  --survey-color-card-foreground: var(--survey-card-foreground);
  --survey-color-popover: var(--survey-popover);
  --survey-color-popover-foreground: var(--survey-popover-foreground);
  --survey-color-primary: var(--survey-primary);
  --survey-color-primary-foreground: var(--survey-primary-foreground);
  --survey-color-muted: var(--survey-muted);
  --survey-color-muted-foreground: var(--survey-muted-foreground);
  --survey-color-border: var(--survey-border);
  --survey-color-input: var(--survey-input);
  --survey-color-ring: var(--survey-ring);
}

.dark {
  --survey-background: #0b0b0f;
  --survey-foreground: #f8fafc;
  --survey-card: #14141a;
  --survey-card-foreground: #f8fafc;
  --survey-popover: #14141a;
  --survey-popover-foreground: #f8fafc;
  --survey-primary: #6366f1;
  --survey-primary-foreground: #ffffff;
  --survey-muted: #1e293b;
  --survey-muted-foreground: #94a3b8;
  --survey-border: #334155;
  --survey-input: #334155;
  --survey-ring: #818cf8;

  --survey-surface: #14141a;
  --survey-surface-2: #1e293b;
  --survey-surface-3: #334155;
  --survey-bg: #0b0b0f;
  --survey-ink: #f8fafc;
  --survey-ink-2: #cbd5e1;
  --survey-ink-3: #94a3b8;
  --survey-line: #334155;
}

/* Typography classes */
.survey-display {
  font-family: var(--survey-font-primary);
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.survey-h1 {
  font-family: var(--survey-font-primary);
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.survey-h2 {
  font-family: var(--survey-font-primary);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.survey-h3 {
  font-family: var(--survey-font-primary);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}

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

.survey-body {
  font-family: var(--survey-font-primary);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}

.survey-caption {
  font-family: var(--survey-font-primary);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.survey-mono {
  font-family: var(--survey-font-mono);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}