:root {
  --cream: #f3ddc0;
  --paper: #3a0b0b;
  --ink: #f3ddc0;
  --muted: #c4a58e;
  --sage: #9c6552;
  --sage-deep: #e8ccab;
  --sage-deeper: #2a0606;
  --sage-soft: #4a1714;
  --terracotta: #d08a6a;
  --terracotta-soft: #5a201b;
  --gold: #d8b07a;
  --gold-text: #e7c9a2;
  --gold-soft: #e8ccab;
  --maroon: #b06a52;
  --line: #5a2a22;
  --line-dark: rgba(243, 221, 192, 0.25);
  --shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.8);
  --bg: #2a0606;
  --bg-soft: #3a0b0b;
  --bg-deep: #1c0202;
}

body {
  background:
    radial-gradient(1100px 560px at 8% -8%, #4a1714 0%, transparent 62%),
    radial-gradient(900px 520px at 100% 6%, #3a0b0b 0%, transparent 58%),
    var(--bg);
}

.intro__panel {
  background:
    radial-gradient(100% 70% at 50% 40%, rgba(232, 204, 171, 0.1), transparent 65%),
    linear-gradient(155deg, #4a1714, #1c0202 72%);
}

.hero {
  background:
    radial-gradient(95% 62% at 50% 0%, rgba(232, 204, 171, 0.12), transparent 62%),
    radial-gradient(80% 55% at 50% 106%, rgba(74, 23, 20, 0.85), transparent 70%),
    var(--bg);
}

.nav.is-stuck {
  background: rgba(42, 6, 6, 0.9);
  border-bottom-color: var(--gold-soft);
}

.nav__toggle {
  background: rgba(58, 11, 11, 0.75);
  border-color: var(--line);
}

.note__mark {
  color: rgba(232, 204, 171, 0.06);
}

.families {
  background: linear-gradient(180deg, var(--bg-soft), var(--sage-soft));
}

.families::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(232, 204, 171, 0.12) 1px, transparent 0);
}

.events {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(232, 204, 171, 0.12), transparent 60%),
    linear-gradient(180deg, #4a1714, var(--bg) 44%, #3a0b0b);
}

.event {
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(232, 204, 171, 0.12), transparent 55%),
    linear-gradient(165deg, var(--paper), #4a1714);
}

.event:hover {
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.8);
}

.event__arch {
  opacity: 0.28;
}

.event--mehendi {
  --ev-accent: #c9a27e;
}

.event--sangeet {
  --ev-accent: #d08a6a;
}

.event--baraat {
  --ev-accent: #c98f72;
}

.countdown {
  background: var(--bg);
}

.venue {
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(232, 204, 171, 0.12), transparent 65%),
    linear-gradient(180deg, #3a0b0b, var(--bg));
}

.venue__card {
  background: linear-gradient(170deg, var(--paper), #4a1714);
  border-color: var(--gold-soft);
  box-shadow: 0 45px 90px -45px rgba(0, 0, 0, 0.9);
}

.venue__card::before {
  border-color: rgba(232, 204, 171, 0.18);
}

.venue__arch {
  opacity: 0.32;
}

.venue__note-card {
  background: rgba(58, 11, 11, 0.97);
}

.wishes {
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(74, 23, 20, 0.9), transparent 60%),
    var(--bg);
}

input,
select,
textarea {
  background: var(--bg-soft);
  border-color: var(--line);
  color: var(--ink);
}

input::placeholder,
textarea::placeholder {
  color: #a88974;
}

input:focus,
select:focus,
textarea:focus {
  background: var(--bg);
  border-color: var(--sage);
  box-shadow: 0 0 0 4px rgba(232, 204, 171, 0.16);
}

.wish {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: 0 14px 36px -34px rgba(0, 0, 0, 0.8);
}

.wish-text {
  color: var(--ink);
}

.closing {
  background:
    radial-gradient(80% 65% at 50% 100%, rgba(232, 204, 171, 0.12), transparent 65%),
    var(--bg-deep);
}

.btn--solid,
.skip-link {
  background: var(--gold-soft);
  color: var(--bg-deep);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.65);
}

.btn--solid:hover {
  background: var(--sage-deeper);
  color: var(--cream);
}

.toast {
  background: var(--gold-soft);
  color: var(--bg-deep);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.7);
}

.sheet__panel {
  background: linear-gradient(170deg, var(--paper), #4a1714);
  border-color: var(--gold-soft);
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.9);
}

.sheet__panel::before {
  border-color: rgba(232, 204, 171, 0.18);
}

.sheet__input {
  border-color: var(--line);
  background: var(--bg-soft);
  color: var(--ink);
}

.sheet__input:focus {
  background: var(--bg);
  border-color: var(--sage);
  box-shadow: 0 0 0 4px rgba(232, 204, 171, 0.16);
}