/* ═══════════════════════════════════════════════════════
   themes.css — Baby Birthday · 6-theme system
   ═══════════════════════════════════════════════════════ */

/* ── Default variables (warm) ── */
:root {
  --th-bg:         #FDF8F2;
  --th-bg2:        #F5EDE0;
  --th-text:       #2C1F14;
  --th-muted:      #7A5A3C;
  --th-accent:     #C8956A;
  --th-accent-fg:  #FDF8F2;
  --th-label:      #C4897A;
  --th-border:     #EAC8A8;
  --th-border2:    rgba(200,149,106,0.3);
  --th-btn-r:      0px;
  --th-card-r:     0px;
  --th-display:    'Cormorant Garamond', serif;
  --th-body:       'DM Sans', sans-serif;
  --th-dw:         300;
  --th-blob-a:     #EAC8A8;
  --th-blob-b:     #9AB89E;
  --th-ring-a:     #EAC8A8;
  --th-ring-b:     rgba(200,149,106,0.35);
}

body {
  background-color: var(--th-bg);
  color: var(--th-text);
  font-family: var(--th-body);
}

/* ═══════════════════════
   THEME: soft (柔和)
   ═══════════════════════ */
body.theme-soft {
  --th-bg:        #F7F3EF;
  --th-bg2:       #EBE2D8;
  --th-text:      #38281E;
  --th-muted:     #7A6658;
  --th-accent:    #8AB4C8;
  --th-accent-fg: #F7F3EF;
  --th-label:     #B08878;
  --th-border:    #D4C0B4;
  --th-border2:   rgba(138,180,200,0.25);
  --th-btn-r:     0px;
  --th-card-r:    0px;
  --th-blob-a:    #EDCBB0;
  --th-blob-b:    #AACAD8;
  --th-ring-a:    #D4C0B4;
  --th-ring-b:    rgba(138,180,200,0.3);
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 28px,
    rgba(138,180,200,0.07) 28px, rgba(138,180,200,0.07) 29px
  );
}

/* ═══════════════════════
   THEME: warm (溫暖) — default
   ═══════════════════════ */
body.theme-warm {
  --th-bg:        #FDF8F2;
  --th-bg2:       #F5EDE0;
  --th-text:      #2C1F14;
  --th-muted:     #7A5A3C;
  --th-accent:    #C8956A;
  --th-accent-fg: #FDF8F2;
  --th-label:     #C4897A;
  --th-border:    #EAC8A8;
  --th-border2:   rgba(200,149,106,0.3);
  --th-btn-r:     0px;
  --th-card-r:    0px;
  --th-blob-a:    #EAC8A8;
  --th-blob-b:    #9AB89E;
  --th-ring-a:    #EAC8A8;
  --th-ring-b:    rgba(200,149,106,0.35);
}

/* ═══════════════════════
   THEME: bold (活潑)
   ═══════════════════════ */
body.theme-bold {
  --th-bg:        #FAFAF4;
  --th-bg2:       #EEF2E4;
  --th-text:      #1A2A1E;
  --th-muted:     #3D604A;
  --th-accent:    #D45A3C;
  --th-accent-fg: #FAFAF4;
  --th-label:     #D45A3C;
  --th-border:    #BADAA0;
  --th-border2:   rgba(61,110,74,0.18);
  --th-btn-r:     0px;
  --th-card-r:    0px;
  --th-dw:        400;
  --th-blob-a:    #EEC840;
  --th-blob-b:    #3D6E4A;
  --th-ring-a:    #BADAA0;
  --th-ring-b:    rgba(238,200,64,0.35);
}

/* ═══════════════════════
   THEME: forest (森林)
   ═══════════════════════ */
body.theme-forest {
  --th-bg:        #F2EEE4;
  --th-bg2:       #E4DDD0;
  --th-text:      #2D1F0E;
  --th-muted:     #6A5040;
  --th-accent:    #4D7A42;
  --th-accent-fg: #F2EEE4;
  --th-label:     #7A5030;
  --th-border:    #A8C098;
  --th-border2:   rgba(77,122,66,0.22);
  --th-display:   'Nunito', sans-serif;
  --th-body:      'Nunito', sans-serif;
  --th-dw:        700;
  --th-btn-r:     50px;
  --th-card-r:    18px;
  --th-blob-a:    #A8C098;
  --th-blob-b:    #E07828;
  --th-ring-a:    #A8C098;
  --th-ring-b:    rgba(168,192,152,0.4);
}

/* ═══════════════════════
   THEME: starry (星空)
   ═══════════════════════ */
body.theme-starry {
  --th-bg:        #0C1445;
  --th-bg2:       #0A0E30;
  --th-text:      #FFF8E8;
  --th-muted:     #A8B8E0;
  --th-accent:    #F0C840;
  --th-accent-fg: #0C1445;
  --th-label:     #8898D0;
  --th-border:    rgba(240,200,64,0.45);
  --th-border2:   rgba(240,200,64,0.2);
  --th-display:   'Playfair Display', serif;
  --th-body:      'DM Sans', sans-serif;
  --th-dw:        400;
  --th-btn-r:     0px;
  --th-card-r:    8px;
  --th-blob-a:    #F0C840;
  --th-blob-b:    #4A6B9A;
  --th-ring-a:    rgba(240,200,64,0.6);
  --th-ring-b:    rgba(240,200,64,0.25);
}

/* ═══════════════════════
   THEME: carnival (嘉年華)
   ═══════════════════════ */
body.theme-carnival {
  --th-bg:        #FFF5E0;
  --th-bg2:       #FFE8C0;
  --th-text:      #1A0800;
  --th-muted:     #7A4820;
  --th-accent:    #E8483A;
  --th-accent-fg: #FFF5E0;
  --th-label:     #E8483A;
  --th-border:    #F5D020;
  --th-border2:   rgba(232,72,58,0.3);
  --th-display:   'Lilita One', cursive;
  --th-body:      'Nunito', sans-serif;
  --th-dw:        400;
  --th-btn-r:     50px;
  --th-card-r:    14px;
  --th-blob-a:    #F5D020;
  --th-blob-b:    #4AAA78;
  --th-ring-a:    #F5D020;
  --th-ring-b:    rgba(74,170,120,0.4);
}

/* ═══════════════════════
   Shared themed elements
   ═══════════════════════ */

/* Ticker */
.ticker-wrap { background: var(--th-accent); }
.ticker-item { color: var(--th-accent-fg); }

/* Invite page buttons */
.btn-invite {
  background: var(--th-text);
  color: var(--th-bg);
  border-radius: var(--th-btn-r);
  transition: background 0.25s, letter-spacing 0.25s;
}
.btn-invite:hover { background: var(--th-accent); }

/* Details card */
.details-card {
  border: 1px solid var(--th-border);
  background: rgba(255,255,255,0.4);
  border-radius: var(--th-card-r);
}
.details-card::before { border-color: var(--th-border2); border-radius: var(--th-card-r); }
.details-card::after  { background: var(--th-bg); color: var(--th-accent); }
.detail-label  { color: var(--th-label); }
.detail-value  { font-family: var(--th-display); font-weight: var(--th-dw); color: var(--th-text); }
.detail-hr     { background: var(--th-border); }
.eyebrow       { color: var(--th-label); }
.wavy-path     { stroke: var(--th-accent); }

/* Photo ring frame */
.photo-ring-outer { border-color: var(--th-ring-a); }
.photo-ring-inner { border-color: var(--th-ring-b); }
.star-acc         { color: var(--th-accent); }

/* Nav */
#nav-title { color: var(--th-muted); font-family: var(--th-display); }
.nav-link  { color: var(--th-muted); border-color: var(--th-border); }
.nav-link:hover { color: var(--th-accent); border-color: var(--th-accent); }
#description { color: var(--th-muted); }

/* ── STARRY: dark theme overrides ── */
body.theme-starry .details-card {
  background: rgba(10,14,48,0.8);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 30px rgba(240,200,64,0.1), inset 0 0 30px rgba(240,200,64,0.03);
}
body.theme-starry .btn-invite {
  background: var(--th-accent);
  color: var(--th-accent-fg);
  font-weight: 600;
}
body.theme-starry .btn-invite:hover { background: #fff; color: #0C1445; }

/* ── FOREST: green button override ── */
body.theme-forest .btn-invite {
  background: var(--th-accent);
  color: var(--th-accent-fg);
  font-weight: 700;
}
body.theme-forest .btn-invite:hover { background: #3A5C32; }

/* ── CARNIVAL: bold button override ── */
body.theme-carnival .btn-invite {
  background: var(--th-accent);
  color: var(--th-accent-fg);
  font-weight: 700;
  letter-spacing: 0.12em;
}
body.theme-carnival .btn-invite:hover { background: #C03028; }

/* ══════════════════════════════════════
   EVENT PAGE — photo grid themed frames
   ══════════════════════════════════════ */

/* Soft: gentle rounded */
body.theme-soft .photo-grid img { border-radius: 8px; }

/* Forest: leaf-border feel */
body.theme-forest .photo-grid img {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(45,31,14,0.12);
}

/* Starry: glowing border */
body.theme-starry .photo-grid img {
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(240,200,64,0.25), 0 0 12px rgba(240,200,64,0.1);
}

/* Carnival: colorful chunky border */
body.theme-carnival .photo-grid .photo-wrap-carnival:nth-child(4n+1) img { outline: 3px solid #E8483A; }
body.theme-carnival .photo-grid .photo-wrap-carnival:nth-child(4n+2) img { outline: 3px solid #F5D020; }
body.theme-carnival .photo-grid .photo-wrap-carnival:nth-child(4n+3) img { outline: 3px solid #4AAA78; }
body.theme-carnival .photo-grid .photo-wrap-carnival:nth-child(4n+4) img { outline: 3px solid #3C98D8; }
body.theme-carnival .photo-grid img { border-radius: 6px; }

/* EVENT PAGE — gate screen */
.gate-themed {
  background: var(--th-bg);
  color: var(--th-text);
}