/* ==========================================================================
   THEME DESIGN TOKENS (Template 1 s.d 5) - Online Invitation & Guestbook v2
   Part of TASK-075: Universal Theme Tokens, Dual-Mode & Live Stage Display
   ========================================================================== */

/* Import luxurious handwriting font for Template 3 & 5 */
@import url('https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap');

/* Default root values (Template 1 - Champagne Ivory) */
:root {
  --theme-bg-light: #F7F1E5;
  --theme-bg-dark: #0A0A0C;
  --theme-primary: #C9A86B;
  --theme-secondary: #E8E2D5;
  --theme-surface-light: #FFFFFF;
  --theme-surface-dark: #16171A;
  --theme-surface-border-light: rgba(201, 168, 107, 0.35);
  --theme-surface-border-dark: rgba(201, 168, 107, 0.25);
  --theme-text-light: #1A1C1D;
  --theme-text-dark: #FAF7F2;
  --theme-text-muted-light: #6B6862;
  --theme-text-muted-dark: #A3A19D;
  --theme-badge-bg-light: rgba(201, 168, 107, 0.12);
  --theme-badge-bg-dark: rgba(255, 255, 255, 0.06);
  --theme-accent: #C9A86B;
  --theme-font-display: 'EB Garamond', serif;
  --theme-font-body: 'Poppins', sans-serif;
}

/* Template 1: Champagne Ivory */
[data-theme="template_1"],
:root[data-theme="template_1"] {
  --theme-bg-light: #F7F1E5;
  --theme-bg-dark: #0A0A0C;
  --theme-primary: #C9A86B;
  --theme-secondary: #E8E2D5;
  --theme-surface-light: #FFFFFF;
  --theme-surface-dark: #16171A;
  --theme-surface-border-light: rgba(201, 168, 107, 0.35);
  --theme-surface-border-dark: rgba(201, 168, 107, 0.25);
  --theme-text-light: #1A1C1D;
  --theme-text-dark: #FAF7F2;
  --theme-text-muted-light: #6B6862;
  --theme-text-muted-dark: #A3A19D;
  --theme-badge-bg-light: rgba(201, 168, 107, 0.12);
  --theme-badge-bg-dark: rgba(255, 255, 255, 0.06);
  --theme-accent: #C9A86B;
  --theme-font-display: 'EB Garamond', serif;
  --theme-font-body: 'Poppins', sans-serif;
}

/* Template 2: Midnight Onyx */
[data-theme="template_2"],
:root[data-theme="template_2"] {
  --theme-bg-light: #F4F4F5;
  --theme-bg-dark: #121315;
  --theme-primary: #C9A86B;
  --theme-secondary: #25282A;
  --theme-surface-light: #FFFFFF;
  --theme-surface-dark: #1C1E21;
  --theme-surface-border-light: rgba(201, 168, 107, 0.4);
  --theme-surface-border-dark: rgba(201, 168, 107, 0.3);
  --theme-text-light: #1A1C1D;
  --theme-text-dark: #FFFFFF;
  --theme-text-muted-light: #52525B;
  --theme-text-muted-dark: #9CA3AF;
  --theme-badge-bg-light: rgba(201, 168, 107, 0.12);
  --theme-badge-bg-dark: rgba(255, 255, 255, 0.06);
  --theme-accent: #C9A86B;
  --theme-font-display: 'EB Garamond', serif;
  --theme-font-body: 'Poppins', sans-serif;
}

/* Template 3: Burgundy Velvet */
[data-theme="template_3"],
:root[data-theme="template_3"] {
  --theme-bg-light: #F9F7F7;
  --theme-bg-dark: #160B0E;
  --theme-primary: #70313D;
  --theme-secondary: #E5C282;
  --theme-surface-light: #FFFFFF;
  --theme-surface-dark: #241116;
  --theme-surface-border-light: rgba(112, 49, 61, 0.25);
  --theme-surface-border-dark: rgba(229, 194, 130, 0.3);
  --theme-text-light: #1A1C1D;
  --theme-text-dark: #FFFFFF;
  --theme-text-muted-light: #5A4A4D;
  --theme-text-muted-dark: #D4B2B8;
  --theme-badge-bg-light: rgba(112, 49, 61, 0.08);
  --theme-badge-bg-dark: rgba(255, 255, 255, 0.06);
  --theme-accent: #C9A86B;
  --theme-font-display: 'Luxurious Script', cursive;
  --theme-font-body: 'Hanken Grotesk', sans-serif;
}

/* Template 4: Slate Ocean */
[data-theme="template_4"],
:root[data-theme="template_4"] {
  --theme-bg-light: #FCFDFF;
  --theme-bg-dark: #0D141C;
  --theme-primary: #647D90;
  --theme-secondary: #DFB860;
  --theme-surface-light: #FFFFFF;
  --theme-surface-dark: #17212C;
  --theme-surface-border-light: rgba(100, 125, 144, 0.3);
  --theme-surface-border-dark: rgba(223, 184, 96, 0.3);
  --theme-text-light: #2D3748;
  --theme-text-dark: #FFFFFF;
  --theme-text-muted-light: #5B6B78;
  --theme-text-muted-dark: #9BB0C1;
  --theme-badge-bg-light: rgba(100, 125, 144, 0.1);
  --theme-badge-bg-dark: rgba(255, 255, 255, 0.06);
  --theme-accent: #B68A5F;
  --theme-font-display: 'Dancing Script', cursive;
  --theme-font-body: 'Hanken Grotesk', sans-serif;
}

/* Template 5: Royal Lilac */
[data-theme="template_5"],
:root[data-theme="template_5"] {
  --theme-bg-light: #FCFDFF;
  --theme-bg-dark: #150B17;
  --theme-primary: #8D4F89;
  --theme-secondary: #E5C282;
  --theme-surface-light: #FFFFFF;
  --theme-surface-dark: #231226;
  --theme-surface-border-light: rgba(141, 79, 137, 0.25);
  --theme-surface-border-dark: rgba(201, 168, 107, 0.3);
  --theme-text-light: #2D242E;
  --theme-text-dark: #FFFFFF;
  --theme-text-muted-light: #6E5A70;
  --theme-text-muted-dark: #D1B3D6;
  --theme-badge-bg-light: rgba(141, 79, 137, 0.1);
  --theme-badge-bg-dark: rgba(255, 255, 255, 0.06);
  --theme-accent: #C9A86B;
  --theme-font-display: 'Luxurious Script', cursive;
  --theme-font-body: 'Poppins', sans-serif;
}

/* Dynamic Mode Binding: Dark Mode (Default for Stage Screens) */
[data-theme-mode="dark"],
:root:not([data-theme-mode="light"]),
body:not([data-theme-mode="light"]),
[data-theme]:not([data-theme-mode="light"]) {
  --theme-bg: var(--theme-bg-dark);
  --theme-surface: var(--theme-surface-dark);
  --theme-surface-border: var(--theme-surface-border-dark);
  --theme-text: var(--theme-text-dark);
  --theme-text-muted: var(--theme-text-muted-dark);
  --theme-badge-bg: var(--theme-badge-bg-dark);
  --theme-glass-bg: rgba(18, 19, 23, 0.88);
  --theme-glow-opacity: 0.15;
}

/* Dynamic Mode Binding: Light Mode (Matches Invitation Atmosphere) */
[data-theme-mode="light"],
:root[data-theme-mode="light"],
body[data-theme-mode="light"],
[data-theme][data-theme-mode="light"] {
  --theme-bg: var(--theme-bg-light);
  --theme-surface: var(--theme-surface-light);
  --theme-surface-border: var(--theme-surface-border-light);
  --theme-text: var(--theme-text-light);
  --theme-text-muted: var(--theme-text-muted-light);
  --theme-badge-bg: var(--theme-badge-bg-light);
  --theme-glass-bg: rgba(255, 255, 255, 0.9);
  --theme-glow-opacity: 0.08;
}

/* Luxury Corner Ornament Utility (CSS Mask with /assets/svg/corner.svg) */
.luxury-corner-ornament {
  width: 72px;
  height: 72px;
  background-color: var(--theme-primary, #C9A86B);
  -webkit-mask: url('/assets/svg/corner.svg') no-repeat center / contain;
  mask: url('/assets/svg/corner.svg') no-repeat center / contain;
  opacity: 0.85;
  transition: background-color 0.4s ease, opacity 0.4s ease;
}

@media (min-width: 1024px) {
  .luxury-corner-ornament {
    width: 88px;
    height: 88px;
  }
}

/* Global Applied Utility Classes */
.theme-canvas {
  background-color: var(--theme-bg, #0A0A0C);
  color: var(--theme-text, #FFFFFF);
  transition: background-color 0.4s ease, color 0.4s ease;
}

.theme-font-display {
  font-family: var(--theme-font-display, serif);
}

.theme-font-body {
  font-family: var(--theme-font-body, sans-serif);
}

.theme-primary-color {
  color: var(--theme-primary, #C9A86B);
}

.theme-primary-bg {
  background-color: var(--theme-primary, #C9A86B);
}

.theme-primary-border {
  border-color: var(--theme-primary, #C9A86B);
}

.theme-surface-card {
  background-color: var(--theme-surface, #16171A);
  border: 1px solid var(--theme-surface-border, rgba(201, 168, 107, 0.25));
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.theme-surface-glass {
  background-color: var(--theme-glass-bg, rgba(22, 23, 26, 0.85));
  border: 1px solid var(--theme-surface-border, rgba(201, 168, 107, 0.25));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.theme-text-muted {
  color: var(--theme-text-muted, #A3A19D);
}

/* Spotlight Progress Bar Gradient */
.spotlight-progress-fill {
  background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
}