/* Wedding site theme – light (default) and system-preference dark */
:root {
  color-scheme: light dark;
  --color-charcoal: #2a2a2a;
  --color-lavender: #8770b8;
  --color-blush: #f7dbd8;
  --color-magenta: #c6195a;
  --color-bg: #fdf8f7;
  --color-surface: rgba(255, 255, 255, 0.8);
  --color-surface-hover: #fff;
  --color-placeholder-stripe: #eed5d2;
  --color-bg-subtle: rgba(247, 219, 216, 0.2);
  --color-pre-bg: #1e1e1e;
  --color-pre-text: #e8e4e4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-charcoal: #e4e4e4;
    --color-lavender: #a78bd4;
    --color-blush: #4a4245;
    --color-magenta: #e01f5c;
    --color-bg: #1a1514;
    --color-surface: rgba(38, 36, 36, 0.95);
    --color-surface-hover: rgba(55, 52, 52, 0.98);
    --color-placeholder-stripe: #5a5254;
    --color-bg-subtle: rgba(74, 66, 69, 0.3);
    --color-pre-bg: #252525;
    --color-pre-text: #e4e4e4;
  }

  /* Form controls inherit dark theme (admin, RSVP, etc.) */
  input,
  select,
  textarea {
    background-color: var(--color-surface);
    color: var(--color-charcoal);
    border-color: var(--color-blush);
  }
  input::placeholder,
  textarea::placeholder {
    color: var(--color-charcoal);
    opacity: 0.6;
  }
}

html {
  transition: color 0.2s, background-color 0.2s;
}
body {
  transition: color 0.2s, background-color 0.2s;
}