/*
 * Design Preview Component
 *
 * CSS variables (define on container):
 *   --design-preview-bg:     background color
 *   --design-preview-text:   text/foreground color
 *   --design-preview-accent: accent color (borders, buttons)
 *
 * Note: "form-design" namespace reserved for actual form styling
 */

.design-preview {
  background-color: var(--design-preview-bg);
  color: var(--design-preview-text);
}

.design-preview__title {
  color: var(--design-preview-text);
}

.design-preview__input {
  border-bottom-color: color-mix(in srgb, var(--design-preview-accent) 40%, transparent);
  color: var(--design-preview-text);
  transition: border-color 0.3s ease;
}

.design-preview__input::placeholder {
  color: color-mix(in srgb, var(--design-preview-text) 20%, transparent);
}

.design-preview__input:focus {
  border-bottom-color: var(--design-preview-accent);
}

.design-preview__button {
  color: color-mix(in srgb, var(--design-preview-text) 25%, transparent);
  transition: color 0.3s ease;
}

.design-preview__input:focus + .design-preview__button {
  color: var(--design-preview-accent);
}

.design-preview__footer {
  color: var(--design-preview-text);
}