@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@400;500;600;700&family=Great+Vibes&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #FBF7F2;
  --surface: #FFFFFF;
  --ink: #2A1B12;
  --muted: #8A7A6B;
  --rose: #C8587A;
  --gold: #B8893A;
  --bride: #D88BA8;
  --groom: #3F6B7B;
  --success: #3F8A5C;
  --error: #B5413B;
  --shadow-sm: 0 2px 6px rgba(42,27,18,0.06);
  --shadow-md: 0 4px 20px rgba(42,27,18,0.06);
  --shadow-lg: 0 8px 40px rgba(42,27,18,0.10);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --t: 200ms ease-out;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 18px; line-height: 1.5;
  min-height: 100vh; min-height: 100dvh;
}
.font-script { font-family: 'Great Vibes', cursive; }
.font-ui     { font-family: 'Inter', system-ui, sans-serif; }
.tabular     { font-variant-numeric: tabular-nums; }

button, .btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600; font-size: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 14px 24px; min-height: 44px;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary { background: var(--rose); color: #fff; }
.btn-primary:hover { box-shadow: var(--shadow-md); }
.btn-primary:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

input, textarea, select {
  font-family: inherit; font-size: 16px;
  border: 1px solid #E3D9CC; background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px 14px; min-height: 44px;
  color: var(--ink); width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--rose); outline-offset: 0; border-color: var(--rose); }

.card {
  background: var(--surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 24px;
}
.container { max-width: 960px; margin: 0 auto; padding: 24px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}