:root {
  --ds-color-white: #ffffff;
  --ds-color-gray-50: #fafafa;
  --ds-color-gray-100: #f3f4f6;
  --ds-color-gray-200: #e5e7eb;
  --ds-color-gray-300: #e0e0e0;
  --ds-color-gray-400: #9ca3af;
  --ds-color-gray-500: #666666;
  --ds-color-black: #000000;
  --ds-color-red-300: #fca5a5;
  --ds-color-red-500: #ef4444;
  --ds-color-red-700: #b91c1c;

  --ds-surface-default: var(--ds-color-white);
  --ds-surface-subtle: var(--ds-color-gray-50);
  --ds-surface-inverse: var(--ds-color-black);
  --ds-text-default: var(--ds-color-black);
  --ds-text-muted: var(--ds-color-gray-500);
  --ds-text-inverse: var(--ds-color-white);
  --ds-border-default: var(--ds-color-gray-300);
  --ds-border-strong: var(--ds-color-black);
  --ds-focus-ring: var(--ds-color-black);
  --ds-state-danger: var(--ds-color-red-500);
  --ds-state-danger-muted: var(--ds-color-red-300);

  --ds-font-family-base: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ds-font-size-50: 0.5rem;
  --ds-font-size-75: 0.5625rem;
  --ds-font-size-100: 0.625rem;
  --ds-font-size-200: 0.75rem;
  --ds-font-size-300: 0.875rem;
  --ds-font-size-400: 1rem;
  --ds-font-size-500: 1.5rem;

  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 700;

  --ds-line-height-tight: 1.2;
  --ds-line-height-base: 1.5;
  --ds-line-height-relaxed: 1.7;

  --ds-letter-spacing-tight: -0.01em;
  --ds-letter-spacing-wide: 0.08em;
  --ds-letter-spacing-widest: 0.12em;

  --ds-space-0: 0;
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;

  --ds-radius-none: 0;
  --ds-radius-sm: 0.1875rem;
  --ds-radius-md: 0.25rem;
  --ds-radius-pill: 999px;

  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;

  --ds-motion-duration-fast: 100ms;
  --ds-motion-duration-base: 160ms;
  --ds-motion-ease-standard: ease;
  --ds-motion-ease-emphasis: cubic-bezier(0.2, 0, 0, 1);

  --ds-elevation-0: none;
  --ds-elevation-overlay: 0 0 0 1px rgb(0 0 0 / 10%);

  --ds-control-height-sm: 1.75rem;
  --ds-control-height-md: 2rem;
  --ds-control-height-lg: 2.25rem;

  --ds-button-bg: var(--ds-surface-inverse);
  --ds-button-fg: var(--ds-text-inverse);
  --ds-button-border: var(--ds-border-strong);

  --ds-input-bg: var(--ds-surface-default);
  --ds-input-fg: var(--ds-text-default);
  --ds-input-border: var(--ds-border-default);
  --ds-input-border-focus: var(--ds-focus-ring);
  --ds-input-border-error: var(--ds-state-danger);
}