/* Shared color system from the landing page.
   This file intentionally changes tokens and color treatments only. */
:root,
[data-theme="dark"],
body.theme-dark {
  --bg-primary: #1b1211;
  --bg-secondary: #2e1f1b;
  --bg-tertiary: #3b2925;
  --bg-card: #2e1f1b;
  --bg-card-hover: #3b2925;
  --bg-glass: rgba(46, 31, 27, 0.9);
  --header-bg: rgba(27, 18, 17, 0.96);
  --header-scrolled-bg: rgba(27, 18, 17, 0.96);
  --border-subtle: #5e4b43;
  --border-focus: rgba(107, 30, 35, 0.72);

  --accent-primary: #6b1e23;
  --accent-secondary: #8a3a3e;
  --accent-light: #b9827c;
  --accent-dark: #2c0f12;
  --accent-glow: rgba(107, 30, 35, 0.24);
  --accent-glow-secondary: rgba(107, 30, 35, 0.12);
  --accent-text: #d4aaa1;
  --accent-gold: var(--accent-primary);
  --accent-gold-light: var(--accent-light);
  --accent-gold-dark: var(--accent-dark);
  --accent-gold-glow: var(--accent-glow);
  --accent-gold-text: var(--accent-text);

  --text-primary: #f5efeb;
  --text-secondary: #d8cbc5;
  --text-muted: #aa948b;
  --text-inverse: #ffffff;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 8px 30px rgba(123, 48, 71, 0.2);
}

[data-theme="light"],
body.theme-light {
  --bg-primary: #f8f9fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eef4fa;
  --bg-card: #ffffff;
  --bg-card-hover: #edf0f4;
  --bg-glass: rgba(245, 246, 248, 0.94);
  --header-bg: rgba(248, 249, 251, 0.96);
  --header-scrolled-bg: rgba(248, 249, 251, 0.96);
  --border-subtle: #e1e5ea;
  --border-focus: rgba(79, 120, 168, 0.38);

  --accent-primary: #4f78a8;
  --accent-secondary: #7aa6d4;
  --accent-light: #cfe5f7;
  --accent-dark: #365b87;
  --accent-glow: rgba(122, 166, 212, 0.2);
  --accent-glow-secondary: rgba(207, 229, 247, 0.34);
  --accent-text: #426b9b;
  --accent-gold: var(--accent-primary);
  --accent-gold-light: var(--accent-light);
  --accent-gold-dark: var(--accent-dark);
  --accent-gold-glow: var(--accent-glow);
  --accent-gold-text: var(--accent-text);

  --text-primary: #202124;
  --text-secondary: #4e5258;
  --text-muted: #73777f;
  --text-inverse: #ffffff;

  --shadow-sm: 0 4px 14px rgba(25, 35, 45, 0.06);
  --shadow-md: 0 12px 32px rgba(25, 35, 45, 0.09);
  --shadow-lg: 0 24px 60px rgba(25, 35, 45, 0.13);
  --shadow-gold: 0 8px 26px rgba(40, 87, 173, 0.18);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.site-header,
.site-header.scrolled {
  background: var(--header-bg) !important;
  border-color: var(--border-subtle) !important;
}

.site-announcement-banner {
  background: var(--header-bg) !important;
  color: var(--accent-primary) !important;
  border-bottom-color: var(--border-focus) !important;
  box-shadow: var(--shadow-sm) !important;
}

.site-announcement-banner a {
  background: var(--accent-primary) !important;
  color: var(--text-inverse) !important;
}

.brand-symbol,
.theme-toggle-btn,
.mobile-menu-btn,
.btn-admin {
  border-color: var(--border-subtle) !important;
}

.nav-link.active,
.nav-link:hover,
.brand-symbol,
.section-tag,
.guide-block h2,
.guide-block h2 i,
.faq-item.active .faq-question,
.faq-icon-toggle {
  color: var(--accent-primary) !important;
}

.nav-link.active::after,
.faq-item.active .faq-icon-toggle,
.btn-primary,
[data-open-discount].btn-primary {
  background: var(--accent-primary) !important;
}

.btn-primary,
[data-open-discount].btn-primary,
.faq-item.active .faq-icon-toggle {
  color: var(--text-inverse) !important;
}

.text-gradient {
  background: linear-gradient(135deg, var(--text-primary) 20%, var(--accent-light) 68%, var(--accent-primary) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.package-card,
.guide-article,
.checklist-item,
.faq-item,
.comparison-table-wrapper {
  background-color: var(--bg-card);
  border-color: var(--border-subtle);
}

.comparison-table th,
.comparison-table tr:nth-child(even) {
  background: var(--accent-glow-secondary);
}

.guide-article div[style*="rgba(212, 163, 89"],
.faq-page-container div[style*="rgba(22, 27, 36"] {
  background: var(--accent-glow-secondary) !important;
  border-color: var(--border-focus) !important;
}

.site-footer {
  background: var(--bg-secondary) !important;
  border-color: var(--border-subtle) !important;
}