:root,
html[data-theme="classic-ivory"] {
  --paper:#faf7f1;
  --paper2:#eee7da;
  --ink:#35312e;
  --muted:#887f75;
  --accent:#c2b38d;
  --dark:#6f6252;
  --line:rgba(77,66,55,.25);
  --gold:#d8c9a4;
  --theme-page:#ebe5dc;
  --theme-stage-dot:rgba(100,80,60,.07);
  --theme-invite-shadow:#594a3820;
  --theme-on-accent:#fff;
  --theme-hero-top:rgba(18,16,14,.05);
  --theme-hero-bottom:rgba(20,18,16,.58);
  --theme-hero-shadow:rgba(0,0,0,.72);
  --theme-light-a:rgba(255,246,214,.9);
  --theme-light-b:rgba(255,246,214,.55);
  --theme-light-c:rgba(255,255,255,.65);
  --theme-frame:rgba(255,255,255,.5);
  --theme-map-line:#ffffff99;
  --theme-map:#ded7cd;
  --theme-control:#ffffffe0;
  --theme-dot:#c9c0b4;
  --theme-required:#9a6256;
  --theme-field:#ffffff99;
  --theme-side:#78685426;
  --theme-nav:#faf7f1f2;
  --theme-nav-shadow:#4b3d2e20;
  --theme-focus:rgba(111,98,82,.1);
  --theme-soft-shadow:rgba(70,55,39,.12);
  --theme-hover-shadow:rgba(53,49,46,.16);
  --theme-marker:rgba(53,49,46,.25);
  --theme-portrait-start:rgba(255,255,255,.2);
  --theme-portrait-mid:rgba(255,255,255,.08);
  --theme-portrait-end:rgba(255,255,255,.06);
  --theme-thumb-line:rgba(255,255,255,.72);
  --theme-scroll-shadow:rgba(0,0,0,.45);
  --theme-intro-glow:rgba(216,201,164,.24);
}

html[data-theme="sage-garden"] {
  --paper:#f6f5ee;
  --paper2:#e6e9df;
  --ink:#303630;
  --muted:#737b70;
  --accent:#aeb99d;
  --dark:#596451;
  --line:rgba(62,75,58,.25);
  --gold:#c7bd91;
  --theme-page:#e4e8df;
  --theme-stage-dot:rgba(74,91,69,.08);
  --theme-invite-shadow:rgba(50,64,47,.13);
  --theme-on-accent:#fff;
  --theme-hero-top:rgba(22,30,22,.05);
  --theme-hero-bottom:rgba(22,30,22,.56);
  --theme-hero-shadow:rgba(11,20,12,.68);
  --theme-light-a:rgba(244,239,203,.82);
  --theme-light-b:rgba(235,242,218,.52);
  --theme-light-c:rgba(255,255,255,.62);
  --theme-frame:rgba(248,250,241,.55);
  --theme-map-line:rgba(255,255,255,.55);
  --theme-map:#d7ddd2;
  --theme-control:rgba(250,250,244,.9);
  --theme-dot:#bcc3b5;
  --theme-required:#8a5f55;
  --theme-field:rgba(255,255,250,.64);
  --theme-side:rgba(77,94,72,.18);
  --theme-nav:rgba(246,245,238,.95);
  --theme-nav-shadow:rgba(48,63,45,.12);
  --theme-focus:rgba(89,100,81,.12);
  --theme-soft-shadow:rgba(50,68,47,.13);
  --theme-hover-shadow:rgba(42,59,40,.16);
  --theme-marker:rgba(48,54,48,.25);
  --theme-portrait-start:rgba(255,255,255,.2);
  --theme-portrait-mid:rgba(255,255,255,.08);
  --theme-portrait-end:rgba(255,255,255,.06);
  --theme-thumb-line:rgba(255,255,255,.72);
  --theme-scroll-shadow:rgba(8,18,9,.45);
  --theme-intro-glow:rgba(199,189,145,.22);
}

html[data-theme="dusty-rose"] {
  --paper:#fbf5f3;
  --paper2:#f0e3e0;
  --ink:#433738;
  --muted:#8c7778;
  --accent:#c9aaa8;
  --dark:#806466;
  --line:rgba(94,68,71,.23);
  --gold:#d7bd9e;
  --theme-page:#eee3e0;
  --theme-stage-dot:rgba(111,78,82,.07);
  --theme-invite-shadow:rgba(87,55,59,.13);
  --theme-on-accent:#fff;
  --theme-hero-top:rgba(37,23,25,.04);
  --theme-hero-bottom:rgba(38,23,25,.54);
  --theme-hero-shadow:rgba(31,16,19,.68);
  --theme-light-a:rgba(255,236,213,.82);
  --theme-light-b:rgba(255,225,229,.5);
  --theme-light-c:rgba(255,255,255,.62);
  --theme-frame:rgba(255,247,246,.56);
  --theme-map-line:rgba(255,255,255,.58);
  --theme-map:#e2d3d0;
  --theme-control:rgba(255,250,248,.9);
  --theme-dot:#cfbdbc;
  --theme-required:#9d5e58;
  --theme-field:rgba(255,255,255,.62);
  --theme-side:rgba(117,79,83,.18);
  --theme-nav:rgba(251,245,243,.95);
  --theme-nav-shadow:rgba(89,56,60,.12);
  --theme-focus:rgba(128,100,102,.12);
  --theme-soft-shadow:rgba(90,57,62,.13);
  --theme-hover-shadow:rgba(75,47,51,.16);
  --theme-marker:rgba(67,55,56,.25);
  --theme-portrait-start:rgba(255,255,255,.2);
  --theme-portrait-mid:rgba(255,255,255,.08);
  --theme-portrait-end:rgba(255,255,255,.06);
  --theme-thumb-line:rgba(255,255,255,.72);
  --theme-scroll-shadow:rgba(31,16,19,.45);
  --theme-intro-glow:rgba(215,189,158,.23);
}

html{background:var(--theme-page)}
.stage{
  background:
    radial-gradient(circle at 20% 20%,var(--theme-stage-dot) 0 1px,transparent 2px),
    var(--theme-page);
}
.invite{box-shadow:0 0 45px var(--theme-invite-shadow)}
.hero,.arch,.message,footer{color:var(--theme-on-accent)}
.shade{
  background:
    linear-gradient(180deg,var(--theme-hero-top),transparent 42%),
    linear-gradient(transparent 48%,var(--theme-hero-bottom));
}
.hero-copy{text-shadow:0 4px 22px var(--theme-hero-shadow)}
body::before{
  background:
    radial-gradient(circle at 50% 45%,var(--theme-intro-glow),transparent 26%),
    var(--paper);
}
.shade::before{
  background-image:
    radial-gradient(circle,var(--theme-light-a) 0 1px,transparent 1.8px),
    radial-gradient(circle,var(--theme-light-b) 0 1.2px,transparent 2px),
    radial-gradient(circle,var(--theme-light-c) 0 .8px,transparent 1.6px);
}
.shade::after{border-color:var(--theme-frame)}
.map{
  background:
    linear-gradient(28deg,transparent 47%,var(--theme-map-line) 48% 52%,transparent 53%),
    var(--theme-map);
  background-size:70px 60px;
}
.person figure{
  border-color:var(--theme-on-accent);
  background-image:var(--person-photo,url("assets/hero.png"));
}
.slider,.rsvp-photo{box-shadow:0 20px 45px var(--theme-soft-shadow)}
.slider button{
  background:var(--theme-control);
  color:var(--dark);
}
.slider button:hover{box-shadow:0 6px 18px var(--theme-hover-shadow)}
.dots i{background:var(--theme-dot)}
.gallery-thumbs button::after{border-color:var(--theme-thumb-line)}
form b,.guest-card header button{color:var(--theme-required)}
input,textarea,select{background:var(--theme-field)}
input:focus,textarea:focus,select:focus{
  background:var(--theme-on-accent);
  box-shadow:0 0 0 3px var(--theme-focus);
}
.attendance label.selected,
.submit,
#bottom-nav .primary{
  background:var(--dark);
  color:var(--theme-on-accent);
}
.side{color:var(--theme-side)}
#bottom-nav{
  background:var(--theme-nav);
  box-shadow:0 -6px 20px var(--theme-nav-shadow);
}
.scroll{text-shadow:0 1px 8px var(--theme-scroll-shadow)}
.venue-info .venue-label{
  background:var(--dark);
  color:var(--theme-on-accent);
}
@media(hover:hover){
  .guest-head button:hover{
    color:var(--theme-on-accent);
    background:var(--dark);
  }
  .submit:hover{box-shadow:0 10px 24px var(--theme-hover-shadow)}
}
@keyframes markerPulse{
  0%{box-shadow:0 0 0 0 var(--theme-marker)}
  60%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@keyframes portraitEnter{
  0%{opacity:0;transform:scale(.72);box-shadow:0 0 0 0 var(--theme-portrait-start)}
  70%{opacity:1;transform:scale(1.04);box-shadow:0 0 0 13px var(--theme-portrait-mid)}
  100%{opacity:1;transform:scale(1);box-shadow:0 0 0 7px var(--theme-portrait-end)}
}