/* Theme fix overrides to ensure full site-wide dark/light surfaces
   This file is included AFTER style-modern.css to enforce variable-driven surfaces */
:root{
  --surface: #FFFFFF;
  --surface-alt: #F7F3E8;
  --surface-rgb: 255, 255, 255;
  --primary: #FDFCF3;
  --accent: #D4AF37;
  --accent-1: #6366F1;
  --accent-1-rgb: 99, 102, 241;
  --accent-2: #EC4899;
  --accent-2-rgb: 236, 72, 153;
  --gradient-dark: linear-gradient(135deg, #0D3444 0%, #153A4A 100%);
  /* Banner colors (light/dark-aware) */
  --banner-offline-bg: #fff3cd;
  --banner-offline-border: #ffeeba;
  --banner-error-bg: #ffeef0;
  --banner-error-border: #ffd1d9;
}

body{
  background: radial-gradient(circle at top left, rgba(212,175,55,0.16), transparent 18%), linear-gradient(180deg, var(--primary) 0%, var(--surface-alt) 100%);
  background-attachment: fixed;
  color: var(--dark);
}

body.dark-theme{
  --surface: #07121A;
  --surface-alt: #0F1F2F;
  --surface-rgb: 7, 17, 26;
  --primary: #0D3444;
  background: radial-gradient(circle at top left, rgba(212,175,55,0.1), transparent 16%), linear-gradient(180deg, var(--surface) 0%, #07151c 100%);
  color: var(--dark);
  --banner-offline-bg: rgba(212,175,55,0.06);
  --banner-offline-border: rgba(var(--surface-rgb), 0.12);
  --banner-error-bg: rgba(236,72,153,0.06);
  --banner-error-border: rgba(var(--surface-rgb), 0.12);
}

/* Header and controls */
.site-header{ background: rgba(var(--surface-rgb), 0.92) !important; }
body.dark-theme .site-header{ background: rgba(8,18,28,0.92) !important; }

.theme-toggle{ background: var(--surface) !important; color: var(--dark) !important; }
body.dark-theme .theme-toggle{ background: var(--surface-alt) !important; color: var(--dark) !important; }

/* Surfaces */
.section, .tier-card, .card, .panel, .payment-card, .contact-card, .btn-secondary, input, select, textarea{
  background: var(--surface) !important;
  color: inherit;
}
.btn::before{ background: rgba(var(--surface-rgb), 0.06) !important; }

/* Footer */
.site-footer{ background: var(--gradient-dark) !important; color: white !important; }
body.dark-theme .site-footer{ background: var(--gradient-dark) !important; color: white !important; }

/* Small badges and overlays */
.highlight-badge, .tier-card-featured::after{ background: rgba(var(--surface-rgb), 0.08) !important; }

/* Inputs */
input, textarea, select{ border: 1px solid var(--border) !important; }

/* Ensure nav toggle bars adapt */
.nav-toggle span{ background: var(--dark) !important; }
body.dark-theme .nav-toggle span{ background: var(--light) !important; }
