:root {
  --tj-surface: var(--background, var(--color-background, #ffffff));
  --tj-surface-elevated: var(--card, var(--color-surface, #ffffff));
  --tj-text: var(--foreground, var(--color-text, #111111));
  --tj-text-muted: var(--muted-foreground, var(--color-text-muted, #666666));
  --tj-accent: var(--primary, var(--color-accent, currentColor));
  --tj-accent-contrast: var(--primary-foreground, var(--color-accent-contrast, #ffffff));
  --tj-border: var(--border, var(--color-border, color-mix(in srgb, currentColor 18%, transparent)));
  --tj-danger: var(--destructive, var(--color-danger, #b42318));
  --tj-success: var(--color-success, #157f3d);
  --tj-radius: var(--radius, 0.75rem);
  --tj-font-display: var(--font-display, inherit);
  --tj-font-body: var(--font-body, inherit);
  --tj-space-compact: var(--space-2, 0.5rem);
  --tj-space-regular: var(--space-4, 1rem);
  --tj-space-section: var(--space-12, 3rem);
  --tj-motion-fast: 140ms;
  --tj-motion-base: 260ms;
  --tj-motion-slow: 600ms;
  --tj-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tj-motion-fast: 0ms;
    --tj-motion-base: 0ms;
    --tj-motion-slow: 0ms;
  }
}