/* Wedding invitation theme presets */

body.theme-classic {
  --bg: #fafafa;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --line: #e8e8e8;
  --accent: #111111;
  --card: #ffffff;
  --section-alt-bg: #f5f5f5;
  --hero-start: #f3f3f3;
  --hero-end: #ececec;
  --guestbook-pink: #e8a0a8;
  --guestbook-pink-light: #fdf5f6;
  --guestbook-pink-soft: #f7e8ea;
  --page-shadow: rgba(0, 0, 0, 0.04);
  --btn-secondary-bg: #f1f1f1;
}

body.theme-refined {
  --bg: #f4f4f5;
  --text: #222222;
  --muted: #707070;
  --line: #dddddf;
  --accent: #2b2b2b;
  --card: #ffffff;
  --section-alt-bg: #ececee;
  --hero-start: #ececee;
  --hero-end: #e2e2e5;
  --guestbook-pink: #9a8c98;
  --guestbook-pink-light: #f5f2f4;
  --guestbook-pink-soft: #ebe5ea;
  --page-shadow: rgba(0, 0, 0, 0.06);
  --btn-secondary-bg: #ececee;
}

body.theme-samcheong {
  --bg: #f3efe6;
  --text: #2d2a24;
  --muted: #6d6558;
  --line: #ddd4c4;
  --accent: #2f4a3b;
  --card: #faf7f0;
  --section-alt-bg: #ebe4d6;
  --hero-start: #e8e0d0;
  --hero-end: #ddd2bf;
  --guestbook-pink: #8b6f47;
  --guestbook-pink-light: #f4ede1;
  --guestbook-pink-soft: #e8dece;
  --page-shadow: rgba(47, 74, 59, 0.08);
  --btn-secondary-bg: #e8dece;
}

body.theme-bright {
  --bg: #fff7fa;
  --text: #402833;
  --muted: #8d6675;
  --line: #f2d9e3;
  --accent: #d46b93;
  --card: #ffffff;
  --section-alt-bg: #fff0f6;
  --hero-start: #ffe8f1;
  --hero-end: #ffd9e8;
  --guestbook-pink: #f4a6c1;
  --guestbook-pink-light: #fff3f8;
  --guestbook-pink-soft: #ffe8f1;
  --page-shadow: rgba(212, 107, 147, 0.08);
  --btn-secondary-bg: #ffe8f1;
}

body.theme-garden {
  --bg: #f4f7f2;
  --text: #243328;
  --muted: #66756a;
  --line: #d7e2d8;
  --accent: #4f6f52;
  --card: #ffffff;
  --section-alt-bg: #e8efe9;
  --hero-start: #e3ebe4;
  --hero-end: #d5e1d7;
  --guestbook-pink: #8db38d;
  --guestbook-pink-light: #f0f6f1;
  --guestbook-pink-soft: #e3ede4;
  --page-shadow: rgba(79, 111, 82, 0.08);
  --btn-secondary-bg: #e3ede4;
}

body.theme-ivory-gold {
  --bg: #f8f4ec;
  --text: #3f3428;
  --muted: #8a7a63;
  --line: #e7dcc8;
  --accent: #8c6d3f;
  --card: #fffdf8;
  --section-alt-bg: #f1e8d8;
  --hero-start: #efe4d2;
  --hero-end: #e4d5bc;
  --guestbook-pink: #c8a96b;
  --guestbook-pink-light: #faf4e8;
  --guestbook-pink-soft: #f1e7d4;
  --page-shadow: rgba(140, 109, 63, 0.1);
  --btn-secondary-bg: #f1e7d4;
}

body.theme-midnight {
  --bg: #edf0f7;
  --text: #1c2435;
  --muted: #667089;
  --line: #d5dced;
  --accent: #1f2a44;
  --card: #ffffff;
  --section-alt-bg: #e3e8f3;
  --hero-start: #dbe2f0;
  --hero-end: #ccd6ea;
  --guestbook-pink: #7f93c3;
  --guestbook-pink-light: #eef2fa;
  --guestbook-pink-soft: #e1e8f6;
  --page-shadow: rgba(31, 42, 68, 0.1);
  --btn-secondary-bg: #e1e8f6;
}

body.theme-blush {
  --bg: #fdf3f4;
  --text: #4a2b30;
  --muted: #9a6f76;
  --line: #efd5d8;
  --accent: #b85c67;
  --card: #ffffff;
  --section-alt-bg: #faebec;
  --hero-start: #f8e3e6;
  --hero-end: #f2d4d8;
  --guestbook-pink: #e7a0a8;
  --guestbook-pink-light: #fff4f5;
  --guestbook-pink-soft: #fae4e7;
  --page-shadow: rgba(184, 92, 103, 0.08);
  --btn-secondary-bg: #fae4e7;
}

body.theme-autumn {
  --bg: #f9f0e8;
  --text: #3f2d22;
  --muted: #8a6a57;
  --line: #e8d4c3;
  --accent: #9c5b3c;
  --card: #fffaf5;
  --section-alt-bg: #f2e2d4;
  --hero-start: #edd9c8;
  --hero-end: #e2c8b2;
  --guestbook-pink: #d18b62;
  --guestbook-pink-light: #faefe4;
  --guestbook-pink-soft: #f3e0d0;
  --page-shadow: rgba(156, 91, 60, 0.1);
  --btn-secondary-bg: #f3e0d0;
}

body.theme-modern {
  --bg: #f1f4f8;
  --text: #1f2d3d;
  --muted: #66788a;
  --line: #d5dee8;
  --accent: #3d5a80;
  --card: #ffffff;
  --section-alt-bg: #e7edf4;
  --hero-start: #dde6ef;
  --hero-end: #cfd9e5;
  --guestbook-pink: #6d8fb3;
  --guestbook-pink-light: #eef3f8;
  --guestbook-pink-soft: #e2eaf3;
  --page-shadow: rgba(61, 90, 128, 0.08);
  --btn-secondary-bg: #e2eaf3;
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.theme-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.theme-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-card {
  border: 2px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-option input:checked + .theme-card {
  border-color: #111;
  box-shadow: 0 0 0 1px #111;
}

.theme-preview {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 54px;
}

.theme-preview span {
  display: block;
}

.theme-info {
  padding: 10px 12px 12px;
}

.theme-info strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.theme-info p {
  margin: 0;
  font-size: 0.76rem;
  color: #777;
  line-height: 1.45;
}

@media (min-width: 700px) {
  .theme-picker {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .theme-picker {
    grid-template-columns: repeat(5, 1fr);
  }
}