/* ============================================================
   STYLE XANH RÊU — bật bằng <html data-theme="green"> (nút đổi style ở
   nav, xem lib/theme.js). CSS gốc của site là style ĐỎ; file này chỉ ghi
   đè MÀU (không đụng layout/font) về bảng màu kem + xanh rêu cũ (commit
   f95da50). Nạp sau sections.css / gift-box.css / progress-tree.css để
   thắng cùng selector.

   CỔNG MỞ THIỆP luôn đỏ: không rule nào ở đây chạm .cover-gate — cổng tự
   khai palette riêng trên chính nó (cover-gate.css). Cổng cũng mang class
   .on-night nên override .on-night phải chừa nó ra (:not(.cover-gate)).

   Sửa màu ở style đỏ (tokens.css, sections.css…) thì nhớ sửa bản tương
   ứng ở đây, và ngược lại.
   ============================================================ */

/* ---- Token ---------------------------------------------------- */
html[data-theme="green"] {
  --paper: #F5F2EB;
  --paper-deep: #EBE8E0;
  --ink: #2F3531;
  --ink-soft: #626C64;
  --ink-faint: #687169;
  --accent: #607462;
  --accent-bright: #95AC92;
  --water: #577380;
  --water-soft: #A8C0C9;
  --soft: #CFD8CE;
  --night: #232A27;
  --glow: #E6EFE4;
  --sun: #DFA855;

  --hairline: 1px solid rgba(47, 53, 49, 0.14);
  --shadow-lift: 0 24px 60px -28px rgba(47, 53, 49, 0.4);
  --shadow-float: 0 12px 30px -14px rgba(47, 53, 49, 0.28);
  --scrim-night: rgba(35, 42, 39, 0.88);

  /* Chibi (chibi.js đọc qua var(), fallback là màu style đỏ). */
  --chibi-bow: #3B2A26;
  --chibi-legs: #3E4A54;
  --chibi-shadow: #2F3531;
  --chibi-confetti: #607462;
  --chibi-confetti-soft: #CFD8CE;
}

html[data-theme="green"] .on-night:not(.cover-gate) {
  --paper: #232A27;
  --paper-deep: #2A312D;
  --ink: #EFF2EC;
  --ink-soft: #AFB9B1;
  --ink-faint: #8B958D;
  --accent: #A3BBA1;
  --accent-bright: #B7CBB4;
  --hairline: 1px solid rgba(239, 242, 236, 0.14);
}

/* ---- Nền trang (style.css) ------------------------------------- */
html[data-theme="green"] body {
  background: var(--paper);
}
html[data-theme="green"] .page-vine { display: none; }
/* Nền trang style xanh: chỉ rồng, nét xanh rêu (độ mờ nướng sẵn trong ô —
   tools/make-pattern-tile.py dragon), cùng cách ghép 2 nửa đối xứng với
   nền đỏ (style.css). */
html[data-theme="green"] body::before,
html[data-theme="green"] body::after {
  background: url("../img/Background/long-phung-pattern-green.webp") right top / 460px 600px repeat;
}

/* Hoa màu nước (src theo style — lib/theme.js): độ mờ riêng từng bông. */
html[data-theme="green"] .flower-decor { opacity: var(--paint-opacity); }
html[data-theme="green"] .flower-decor--paint-only { display: block; }
@media (min-width: 1024px) {
  html[data-theme="green"] .invite__bg-flower--lt { opacity: 0.8; }
  html[data-theme="green"] .invite__bg-flower--lb,
  html[data-theme="green"] .invite__bg-flower--rt { opacity: 0.55; }
  html[data-theme="green"] .invite__bg-flower--rb { opacity: 0.75; }
}
html[data-theme="green"] .cursor-fx__dot { box-shadow: 0 0 8px 2px rgba(149,172,146,0.65); }

/* Hero: bỏ dải sóng đỏ đầu trang, trả lại lớp giấy mờ phủ lên hoa nền. */
html[data-theme="green"] .hero::before {
  inset: 0; height: auto; z-index: 1;
  transform: none; border-radius: 0;
  background: linear-gradient(rgba(245,242,235,0.45), rgba(245,242,235,0.45));
  -webkit-mask-image: none; mask-image: none;
}

/* ---- Vé đếm ngược ---------------------------------------------- */
html[data-theme="green"] .ticket__stub {
  background:
    repeating-linear-gradient(135deg, rgba(126,148,128,0.05) 0 8px, transparent 8px 16px),
    var(--paper);
}

/* ---- "Giấy đỏ" → giấy trắng/kem ---------------------------------
   Nhóm thiệp + vé + popup ảnh tự khai token đỏ trên chính nó
   (sections.css) — khai lại token xanh rêu ở đúng các phần tử đó. */
html[data-theme="green"] .invite__face,
html[data-theme="green"] .ticket,
html[data-theme="green"] .memo__card {
  --paper: #F5F2EB;
  --paper-deep: #EBE8E0;
  --ink: #2F3531;
  --ink-soft: #626C64;
  --ink-faint: #687169;
  --accent: #607462;
  --accent-bright: #95AC92;
  --sun: #DFA855;
  --water: #577380;
  --soft: #CFD8CE;
  --hairline: 1px solid rgba(47, 53, 49, 0.14);
  color: var(--ink);
}
html[data-theme="green"] .invite__face {
  background: #FFFFFF;
  border: var(--hairline);
  box-shadow: var(--shadow-lift);
}
html[data-theme="green"] .invite__face::before { border-color: rgba(96,116,98,0.25); }
html[data-theme="green"] .ticket {
  background: var(--paper-deep);
  border: 1px solid rgba(47,53,49,0.12);
  box-shadow: var(--shadow-lift);
}
html[data-theme="green"] .memo__card { background: #F5F2EB; border: 0; }
html[data-theme="green"] .memo .memo__card {
  background: #F5F2EB;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="green"] .memo .memo__img,
html[data-theme="green"] .memo__img { background-color: #E9E4DA; }
html[data-theme="green"] .memo__photo {
  -webkit-mask-image: none; mask-image: none;
  filter: none;
}

/* Popup quà: về card tối xanh đen như bản cũ. */
html[data-theme="green"] .sheet--gift .sheet__card {
  --paper: #232A27;
  --paper-deep: #2A312D;
  --ink: #EFF2EC;
  --ink-soft: #AFB9B1;
  --ink-faint: #8B958D;
  --accent: #A3BBA1;
  --accent-bright: #B7CBB4;
  --sun: #DFA855;
  --hairline: 1px solid rgba(239, 242, 236, 0.14);
  color: #EFF2EC;
  background: #232A27;
  border: 1px solid rgba(239,242,236,0.14);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,0.9);
}
html[data-theme="green"] .sheet--gift .sheet__scrim { background: rgba(35,42,39,0.88); }
html[data-theme="green"] .gift-qr__title { color: inherit; }
html[data-theme="green"] .gift-qr__save:hover,
html[data-theme="green"] .gift-qr__save:focus-visible { color: #232A27; }

/* Sóng 青海波: chỉ có ở style đỏ (thiệp/vé/popup + 2 dải đầu–cuối trang). */
html[data-theme="green"] .invite__face::after,
html[data-theme="green"] .sheet--gift .sheet__card::after,
html[data-theme="green"] .ticket::after,
html[data-theme="green"] .memo__card::after,
html[data-theme="green"] .invite::after { display: none; }

/* ---- Thiệp mời -------------------------------------------------- */
html[data-theme="green"] .invite { background: var(--paper-deep); }
html[data-theme="green"] .invite__neon { box-shadow: 0 0 6px 2px var(--glow), 0 0 16px 6px rgba(230,239,228,0.55); }
/* Long–Phụng chìm trên thiệp trắng: phượng lặp dọc mép trái, rồng lặp dọc
   mép phải (lật gương — cả hai quay vào giữa, như thẻ cổng mở thiệp), phủ
   từ đỉnh tới đáy thiệp. Ảnh nền (không phải <img>) để repeat-y được, và
   chỉ tải khi phần tử hiện (style đỏ ẩn → không tải). Nhuộm xanh rêu bằng
   filter (xám hoá → sepia → xoay sắc sang lục). z-index -1: trên nền trắng
   của thiệp (.invite__face có isolation: isolate) nhưng dưới chữ. */
html[data-theme="green"] .invite__art {
  filter: grayscale(1) sepia(1) hue-rotate(50deg) saturate(1.6) brightness(0.8);
}
/* Phượng là mảng đặc, rồng chỉ là nét mảnh → rồng cần đậm hơn mới cân. */
html[data-theme="green"] .invite__art--left {
  opacity: 0.08;
  background-image: url("../img/Background/phoenix.webp");
  /* Mảng đỏ đậm: sau xám hoá quá tối → sáng lên + bão hoà mạnh hơn rồng. */
  filter: grayscale(1) brightness(1.5) sepia(1) hue-rotate(50deg) saturate(2.6) brightness(0.75);
}
html[data-theme="green"] .invite__art--right {
  opacity: 0.16;
}
html[data-theme="green"] .invite__schedule-row--highlight::before {
  box-shadow: 0 0 0 4px rgba(96,116,98,0.14), 0 0 12px rgba(96,116,98,0.35);
}
/* 2 hình thoi xác nhận: nền trắng, chữ xanh đậm, viền xanh rêu. */
html[data-theme="green"] .invite__rsvp-btn {
  --rsvp-fill: #FFFFFF;
  --rsvp-ink: #2F3531;
  --rsvp-line: #607462;
}
html[data-theme="green"] .toast { color: #EFF2EC; }

/* ---- Hộp quà trên thiệp (gift-box.css) --------------------------- */
html[data-theme="green"] .invite__gift-label { color: var(--ink-soft); }
html[data-theme="green"] .giftbox__body { background: linear-gradient(165deg, var(--paper-deep), var(--paper)); }
html[data-theme="green"] .giftbox__lid { background: linear-gradient(165deg, var(--paper), var(--paper-deep)); }
html[data-theme="green"] .giftbox__ribbon-v,
html[data-theme="green"] .giftbox__ribbon-h { background: var(--sun); opacity: 0.55; }
html[data-theme="green"] .giftbox__bow-loop { fill: var(--sun); opacity: 0.92; }
html[data-theme="green"] .giftbox__bow-knot { fill: var(--night); }
html[data-theme="green"] .giftbox__glow { background: radial-gradient(circle, rgba(223,168,85,0.85), rgba(223,168,85,0) 70%); }

/* ---- Kỷ niệm (Memory Universe) ----------------------------------- */
html[data-theme="green"] .memories::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(rgba(35,42,39,0.62), rgba(35,42,39,0.62)),
    radial-gradient(ellipse at 50% 45%, rgba(230,239,228,0.06), transparent 62%);
}
html[data-theme="green"] .wall-tile {
  border-color: rgba(239,242,236,0.1);
  opacity: 0.5;
  filter: saturate(0.85);
}
html[data-theme="green"] .memories__title,
html[data-theme="green"] .memories__head .eyebrow,
html[data-theme="green"] .memories__hint { text-shadow: none; }

html[data-theme="green"] .orbit__core { background: radial-gradient(circle, rgba(230,239,228,0.14), transparent 70%); }
html[data-theme="green"] .orbit__core::before {
  background: radial-gradient(circle, rgba(230,239,228,0.18), rgba(230,239,228,0.05) 50%, transparent 70%);
}
html[data-theme="green"] .orbit__ring::before,
html[data-theme="green"] .orbit__ring::after {
  border: var(--hairline); opacity: 0.5; box-shadow: none;
}
html[data-theme="green"] .orbit__sky {
  background: radial-gradient(circle,
    rgba(23,28,25,0.7) 0%, rgba(30,36,33,0.5) 45%, rgba(35,42,39,0.2) 64%, transparent 72%);
}
html[data-theme="green"] .orbit__comet {
  background: conic-gradient(from 0deg,
    transparent 0deg 240deg,
    rgba(230,239,228,0.06) 270deg,
    rgba(230,239,228,0.45) 330deg,
    rgba(239,242,236,1) 357deg,
    transparent 360deg);
}
html[data-theme="green"] .mem__moon {
  background: radial-gradient(circle at 35% 35%, #FFFFFF, #E6EFE4 60%, #95AC92);
  box-shadow: 0 0 8px 2px rgba(230,239,228,0.55);
}
html[data-theme="green"] .mem__thumb {
  border-color: rgba(207,216,206,0.55);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.9);
  filter: saturate(0.8) brightness(0.94);
}
html[data-theme="green"] .mem--secret .mem__thumb {
  background: radial-gradient(circle at 38% 32%, #2B322E, #171C19 72%);
  border-color: rgba(126,148,128,0.55);
  filter: none;
}
html[data-theme="green"] .mem--secret:hover .mem__thumb,
html[data-theme="green"] .mem--secret:focus-visible .mem__thumb {
  border-color: var(--accent);
  box-shadow: 0 0 0 6px rgba(126,148,128,0.12), 0 18px 40px -22px rgba(0,0,0,0.9);
}

html[data-theme="green"] .memdeck__card { background: #F5F2EB; color: #2F3531; }
html[data-theme="green"] .memdeck__photo { background-color: #E9E4DA; }
html[data-theme="green"] .memdeck__photo--secret { background: radial-gradient(circle at 38% 32%, #2B322E, #171C19 72%); }
html[data-theme="green"] .memdeck__tag {
  color: #2F3531;
  background: linear-gradient(rgba(245,242,235,0), #F5F2EB 74%);
}
html[data-theme="green"] .memdeck__card--secret .memdeck__tag {
  color: var(--accent);
  background: linear-gradient(rgba(23,28,25,0), #171C19 74%);
}
html[data-theme="green"] .memdeck__nav { background: rgba(239,242,236,0.06); }
html[data-theme="green"] .memdeck__nav:hover { background: rgba(239,242,236,0.16); }

/* ---- Popup (sheet) chung + Bí mật -------------------------------- */
html[data-theme="green"] .sheet__scrim { background: rgba(35,42,39,0.88); }
html[data-theme="green"] .sheet__card {
  background: #232A27; color: #EFF2EC;
  border-color: rgba(239,242,236,0.14);
}
html[data-theme="green"] .sheet__close { background: rgba(239,242,236,0.1); color: #EFF2EC; }
html[data-theme="green"] .sheet__close:hover { background: rgba(239,242,236,0.2); }
html[data-theme="green"] .secrets__head p { color: #98A199; }
html[data-theme="green"] .secret { background-color: #171C19; }
html[data-theme="green"] .secret__body {
  background: linear-gradient(to top, rgba(35,42,39,0.85), transparent);
  color: #EFF2EC;
}

/* ---- Popup xem ảnh (memo) ---------------------------------------- */
html[data-theme="green"] .memo__scrim { background: rgba(35,42,39,0.86); }
html[data-theme="green"] .memo__count { border-top: 1px solid rgba(47,53,49,0.14); }
html[data-theme="green"] .memo__close { background: rgba(245,242,235,0.9); color: #2F3531; }
html[data-theme="green"] .memo__nav {
  border-color: rgba(239,242,236,0.28);
  background: rgba(239,242,236,0.06); color: #EFF2EC;
}
html[data-theme="green"] .memo__nav:hover { background: rgba(239,242,236,0.16); }
@media (max-width: 860px) {
  html[data-theme="green"] .memo__card figcaption {
    background: linear-gradient(to top, rgba(20,24,22,0.78), rgba(20,24,22,0.45) 65%, rgba(20,24,22,0));
    color: #F5F2EB;
  }
  html[data-theme="green"] .memo__meta { color: rgba(245,242,235,0.7); }
  html[data-theme="green"] .memo__caption { color: #F5F2EB; }
  html[data-theme="green"] .memo__count {
    border-top-color: rgba(245,242,235,0.22);
    color: rgba(245,242,235,0.7);
  }
  html[data-theme="green"] .memo__nav {
    background: rgba(35,42,39,0.92);
    border-color: rgba(239,242,236,0.38);
  }
  html[data-theme="green"] .memo__scrim { background: rgba(35,42,39,0.92); }
  html[data-theme="green"] .memo__card,
  html[data-theme="green"] .memo .memo__card { background: #000; }
  html[data-theme="green"] .memo .memo__img,
  html[data-theme="green"] .memo__img { background-color: #000; }
}

/* ---- Bài hát ----------------------------------------------------- */
html[data-theme="green"] .vinyl__disc {
  background: repeating-radial-gradient(circle at center, #1F2421 0 2px, #161A18 2px 4px);
}
html[data-theme="green"] .vinyl__disc::after {
  background: conic-gradient(from 0deg, transparent, rgba(230,239,228,0.14), transparent 30%);
}
html[data-theme="green"] .vinyl__label { color: #202521; }
html[data-theme="green"] .vinyl__arm { background: linear-gradient(to left, #7C857D, #39413B); }
html[data-theme="green"] .song__list {
  background: rgba(239,242,236,0.03);
  scrollbar-color: rgba(239,242,236,0.16) transparent;
}
html[data-theme="green"] .song__list::-webkit-scrollbar-thumb { background: rgba(239,242,236,0.16); }
html[data-theme="green"] .song__track-btn { color: rgba(239,242,236,0.66); }
html[data-theme="green"] .song__track-btn:hover { color: #EFF2EC; background: rgba(239,242,236,0.05); }
html[data-theme="green"] .song__track-btn:focus-visible { outline-color: rgba(149,172,146,0.7); }
html[data-theme="green"] .song__track.is-current .song__track-btn {
  color: #EFF2EC;
  background: rgba(149,172,146,0.13);
}

html[data-theme="green"] .song-fab {
  border-color: rgba(239,242,236,0.32);
  background: rgba(35,42,39,0.82);
  color: #EFF2EC;
}
html[data-theme="green"] .song-fab:hover { background: rgba(35,42,39,0.95); border-color: var(--soft); }
html[data-theme="green"] .song-fab__disc {
  background: repeating-radial-gradient(circle at center, #242A26 0 1.5px, #161A18 1.5px 3px);
  box-shadow: inset 0 0 0 1px rgba(239,242,236,0.18);
}
html[data-theme="green"] .invite-fab__label { background: rgba(35,42,39,0.78); color: #EFF2EC; }

/* ---- Cây tiến trình (progress-tree.css) --------------------------- */
html[data-theme="green"] .tree.is-night {
  --petal-out: #9FB79C;
  --petal-out-line: #D3E0D0;
  --petal-in: #E8F0E5;
  --petal-in-line: #B7CBB4;
}
html[data-theme="green"] .tree.is-night .tree__groove { stroke: #EFF2EC; }
html[data-theme="green"] .tree.is-night .tree__trunk,
html[data-theme="green"] .tree.is-night .tree__twig,
html[data-theme="green"] .tree.is-night .tree__root path { stroke: #A3BBA1; }
html[data-theme="green"] .tree.is-night .tree__bud { fill: #A3BBA1; }
html[data-theme="green"] .tree.is-night .tree__leaf { fill: #6E8471; stroke: #C3D2C0; }
html[data-theme="green"] .tree.is-night .tree__spark { fill: #B7CBB4; }
html[data-theme="green"] .tree.is-night .tree__label { color: #AFB9B1; }
html[data-theme="green"] .tree.is-night .tree__item.is-current .tree__label { color: #B7CBB4; }