:root {
  --kcm-form-space-1: 0.25rem;
  --kcm-form-space-2: 0.5rem;
  --kcm-form-space-3: 0.75rem;
  --kcm-form-space-4: 1rem;
  --kcm-form-space-5: 1.5rem;
  --kcm-form-space-6: 2rem;
  --kcm-form-space-7: 2.5rem;
  --kcm-form-space-8: 3rem;
  --kcm-form-radius-sm: 0.75rem;
  --kcm-form-radius-md: 0.75rem;
  --kcm-form-radius-lg: 0.7rem;
  --kcm-form-radius-pill: 999px;
  --kcm-form-field-height: 3rem;
  --kcm-form-field-height-compact: 2.625rem;
  --kcm-form-shadow-soft: 0 1rem 2.4rem color-mix(in srgb, var(--kcm-color-primary) 10%, transparent);
  --kcm-form-shadow-ambient: 0 1.65rem 3.5rem color-mix(in srgb, var(--kcm-color-primary) 12%, transparent);
  --kcm-form-shadow-focus: 0 0 0 0.25rem color-mix(in srgb, var(--kcm-color-focus-ring) 26%, transparent);
  --kcm-form-shadow-success: 0 0 0 0.2rem color-mix(in srgb, var(--kcm-color-success) 22%, transparent);
  --kcm-form-shadow-danger: 0 0 0 0.2rem color-mix(in srgb, var(--kcm-color-danger) 22%, transparent);
  --kcm-form-border-strong: color-mix(in srgb, var(--kcm-color-primary) 18%, var(--kcm-color-border) 82%);
  --kcm-form-border-muted: color-mix(in srgb, var(--kcm-color-border) 72%, transparent);
  --kcm-form-surface-elevated: color-mix(in srgb, var(--kcm-color-surface) 93%, white 7%);
  --kcm-form-surface-panel: color-mix(in srgb, var(--kcm-color-surface) 88%, var(--kcm-color-surface-muted) 12%);
  --kcm-form-surface-field: color-mix(in srgb, var(--kcm-color-surface) 96%, white 4%);
  --kcm-form-surface-field-hover: color-mix(in srgb, var(--kcm-color-surface) 88%, var(--kcm-color-accent) 12%);
  --kcm-form-surface-field-active: color-mix(in srgb, var(--kcm-color-surface) 84%, var(--kcm-color-primary) 16%);
  --kcm-form-label-color: color-mix(in srgb, var(--kcm-color-text-primary) 86%, var(--kcm-color-text-secondary) 14%);
  --kcm-form-helper-color: color-mix(in srgb, var(--kcm-color-text-secondary) 92%, var(--kcm-color-surface) 8%);
  --kcm-motion-instant: 100ms;
  --kcm-motion-fast: 160ms;
  --kcm-motion-standard: 240ms;
  --kcm-motion-expressive: 220ms;
  --kcm-motion-section: 220ms;
  --kcm-motion-complete: 1ms;
  --kcm-motion-stagger: 18ms;
  --kcm-ease-standard: cubic-bezier(0.2, 0.75, 0.2, 1);
  --kcm-ease-expressive: cubic-bezier(0.22, 1.2, 0.36, 1);
  --kcm-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --kcm-form-enter-distance: 0.35rem;
  --kcm-form-enter-scale: 0.998;
}

body.kcm-form-runtime {
  --kcm-form-page-background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--kcm-color-accent) 11%, transparent), transparent 26rem),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--kcm-color-secondary) 12%, transparent), transparent 24rem),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kcm-color-background) 88%, var(--kcm-color-surface) 12%) 0%,
      color-mix(in srgb, var(--kcm-color-background) 92%, var(--kcm-color-surface-muted) 8%) 100%
    );
}

body[data-theme="dark"].kcm-form-runtime {
  --kcm-form-shadow-soft: 0 1rem 2.5rem color-mix(in srgb, #000000 36%, transparent);
  --kcm-form-shadow-ambient: 0 1.75rem 3.8rem color-mix(in srgb, #000000 42%, transparent);
  --kcm-form-surface-elevated: color-mix(in srgb, var(--kcm-color-surface) 96%, white 4%);
  --kcm-form-surface-panel: color-mix(in srgb, var(--kcm-color-surface) 92%, var(--kcm-color-surface-muted) 8%);
  --kcm-form-surface-field: color-mix(in srgb, var(--kcm-color-surface) 86%, #000000 14%);
  --kcm-form-surface-field-hover: color-mix(in srgb, var(--kcm-color-surface) 76%, var(--kcm-color-accent) 24%);
  --kcm-form-surface-field-active: color-mix(in srgb, var(--kcm-color-surface) 74%, var(--kcm-color-primary) 26%);
  --kcm-form-page-background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kcm-color-background) 92%, var(--kcm-color-surface) 8%) 0%,
      color-mix(in srgb, var(--kcm-color-background) 88%, #000000 12%) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kcm-motion-instant: 1ms;
    --kcm-motion-fast: 1ms;
    --kcm-motion-standard: 1ms;
    --kcm-motion-expressive: 1ms;
    --kcm-motion-section: 1ms;
    --kcm-motion-complete: 1ms;
    --kcm-motion-stagger: 0ms;
    --kcm-form-enter-distance: 0rem;
    --kcm-form-enter-scale: 1;
  }
}