/* Strict theme enforcement — DO NOT add other colors here.
   This file enforces the exact colors and fonts from the Android app.

   Allowed color set (both themes):
     - Off-white (icon_bg):  #FDFCF3
     - Metallic gold (accent): #D4AF37
     - White: #FFFFFFFF
     - Dark blue-gray (dark_icon_bg): #0D3444
     - Black: #FF000000

   Light theme mapping (:root)
     --bg = white
     --surface = off-white (#FDFCF3)
     --accent = metallic gold
     --text = dark blue-gray (#0D3444)

   Dark theme mapping (body.dark-theme)
     --bg = black
     --surface = dark blue-gray (#0D3444)
     --accent = metallic gold
     --text = off-white (#FDFCF3)
*/

:root {
  --bg: #ffffff;
  --surface: #FDFCF3;
  --accent: #D4AF37;
  --accent-1-rgb: 212, 175, 55;
  --accent-2-rgb: 212, 175, 55;
  --text: #0D3444;
  --text-rgb: 13, 52, 68;
  --surface-rgb: 253, 252, 243;
  --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Typography tokens to match Android app metrics */
  --font-size-base: 16px;
  --line-height-base: 1.6;
  --h1-size: clamp(28px, 4.5vw, 48px);
  --h2-size: clamp(22px, 3.6vw, 32px);
  --h3-size: clamp(18px, 2.6vw, 24px);
  --hero-title-size: clamp(32px, 6.5vw, 56px);
  --hero-sub-size: clamp(16px, 2.5vw, 20px);
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
}

body.dark-theme {
  --bg: #0B2B37;
  --surface: #0D3444;
  --accent: #D4AF37;
  --accent-1-rgb: 212, 175, 55;
  --accent-2-rgb: 212, 175, 55;
  --text: #FDFCF3;
  --surface-rgb: 13, 52, 68;
  --text-rgb: 253, 252, 243;
}

/* Global color + font enforcement */
html, body {
  background: linear-gradient(180deg, #0B2B37 0%, #0D3444 100%) !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
}

/* Global typography enforcement */
body {
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-base) !important;
  font-weight: var(--font-weight-regular) !important;
}

h1, h2, h3, h4, h5 {
  margin: 0 !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
}

h1 {
  font-size: var(--h1-size) !important;
  line-height: 1.05 !important;
  font-weight: var(--font-weight-bold) !important;
}

h2 {
  font-size: var(--h2-size) !important;
  font-weight: var(--font-weight-medium) !important;
}

h3 {
  font-size: var(--h3-size) !important;
  font-weight: var(--font-weight-medium) !important;
}

/* Hero-specific typography */
.hero .hero-title {
  font-size: var(--hero-title-size) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: -0.02em !important;
}
.hero .hero-sub {
  font-size: var(--hero-sub-size) !important;
  font-weight: var(--font-weight-medium) !important;
  opacity: 0.92 !important;
}

/* Surface elements (cards, sections, panels) use the surface color */
.site-header,
.mobile-nav,
.section,
.tier-card,
.card,
.panel,
.payment-card,
.contact-card,
.auth-card,
.dash-card,
.modal-card,
.hero-card,
.hero-card-main,
.site-footer {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Accent for primary buttons/links */
.btn,
.btn-primary,
.hero-actions .btn-primary,
a.btn,
button.primary,
.nav-auth a.btn-primary {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border-color: var(--accent) !important;
}

a {
  color: var(--accent) !important;
}

/* Inputs and form controls */
input, textarea, select {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: rgba(var(--surface-rgb), 0.12) !important;
}

/* Small badges and overlays */
.highlight-badge,
.tier-card-featured::after,
.btn::before {
  background: rgba(var(--surface-rgb), 0.08) !important;
}

/* Nav toggle adaptation */
.nav-toggle span { background: var(--text) !important; }
.nav-toggle span { border-color: var(--text) !important; }

/* High-specificity mobile header fixes (ensure hamburger follows theme and mobile menu works) */
@media (max-width: 1024px) {
  /* hide header nav/auth and show hamburger */
  .site-nav { display: none !important; }
  .nav-auth { display: none !important; }

  /* make hamburger visible and theme-aware */
  .nav-toggle { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 1300 !important; }
  .nav-toggle span { background: var(--text) !important; opacity: 1 !important; }

  /* ensure mobile menu is positioned and clickable when opened */
  .mobile-nav { position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important; z-index: 1290 !important; display: none !important; pointer-events: none !important; }
  .mobile-nav.open { display: flex !important; pointer-events: auto !important; }
}

/* Ensure any remaining background declarations use the allowed palette via variables */
[style*="#"]{ /* no-op selector to avoid accidental literal hex usage; kept for clarity */ }

/* End of strict enforcement */

/* Ensure hero section strictly follows theme variables */
.hero,
.hero-shell,
.hero-grid,
.hero-card-main,
.hero-card,
.hero-showcase,
.hero-actions {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(var(--surface-rgb), 0.96) 100%) !important;
  color: var(--text) !important;
}

.hero .hero-title,
.hero .hero-sub,
.hero .eyebrow {
  color: var(--text) !important;
}

.hero .hero-card-main {
  background: var(--surface) !important;
  border: 1px solid rgba(var(--surface-rgb), 0.06) !important;
}

.hero .hero-actions .btn-primary {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

/* Fallback to ensure background images or svg fills that used hardcoded colors don't override theme */
.hero [style*="#"], .hero svg [fill] {
  fill: currentColor !important;
  color: inherit !important;
}

/* Explicit theme-specific hero backgrounds to increase specificity */
body.dark-theme .hero,
body.dark-theme .hero-shell,
body.dark-theme .hero-grid,
body.dark-theme .hero-card-main,
body.dark-theme .hero-card {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(var(--surface-rgb), 0.96) 100%) !important;
  color: var(--text) !important;
}

body:not(.dark-theme) .hero,
body:not(.dark-theme) .hero-shell,
body:not(.dark-theme) .hero-grid,
body:not(.dark-theme) .hero-card-main,
body:not(.dark-theme) .hero-card {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(var(--surface-rgb), 0.96) 100%) !important;
  color: var(--text) !important;
}

/* Ensure common cards, panels and text are readable in both themes */
body.dark-theme .auth-card,
body.dark-theme .card,
body.dark-theme .tier-card,
body.dark-theme .dash-card,
body.dark-theme .panel,
body.dark-theme .payment-card,
body.dark-theme .contact-card,
body.dark-theme .notice-box,
body.dark-theme .upload-picker,
body.dark-theme .upload-progress-shell,
body.dark-theme .hero-card,
body.dark-theme .hero-card-main,
body.dark-theme .site-footer,
body.dark-theme .mobile-nav,
body.dark-theme .site-header {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: rgba(var(--surface-rgb), 0.12) !important;
}

/* Global readable text in dark theme for common elements */
body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4,
body.dark-theme p, body.dark-theme a, body.dark-theme li, body.dark-theme span,
body.dark-theme label, body.dark-theme input, body.dark-theme textarea, body.dark-theme select {
  color: var(--text) !important;
}

/* Additional forceful readability rules for dark mode */
body.dark-theme {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: var(--text) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.32) !important;
  font-weight: 500 !important;
}

/* Force SVGs, icons and strokes to use the theme text color and full opacity
   but allow explicit fills when the SVG is marked with `data-force-fill`. */
body.dark-theme svg:not([data-force-fill]), body.dark-theme svg:not([data-force-fill]) * {
  fill: var(--text) !important;
  stroke: var(--text) !important;
  color: var(--text) !important;
  opacity: 1 !important;
}

/* Override muted/low-opacity utilities that hinder readability */
.muted, .text-muted, .low-opacity, [class*="-muted"] {
  opacity: 1 !important;
  color: var(--text) !important;
}

/* Ensure placeholder text in dark-theme inputs is readable */
body.dark-theme input::placeholder, body.dark-theme textarea::placeholder {
  color: rgba(255,255,255,0.84) !important;
  opacity: 1 !important;
}

/* Also ensure light theme components use surface/bg properly */
body:not(.dark-theme) .auth-card,
body:not(.dark-theme) .card,
body:not(.dark-theme) .tier-card,
body:not(.dark-theme) .dash-card,
body:not(.dark-theme) .panel,
body:not(.dark-theme) .payment-card,
body:not(.dark-theme) .contact-card,
body:not(.dark-theme) .notice-box,
body:not(.dark-theme) .hero-card,
body:not(.dark-theme) .hero-card-main,
body:not(.dark-theme) .site-footer {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: rgba(var(--surface-rgb), 0.12) !important;
}

/* Dark-theme readability overrides for important headings */
body.dark-theme .section-title,
body.dark-theme .section-lead {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: var(--text) !important;
}

/* Ensure elite table header has high contrast in dark theme */
body.dark-theme .elite-row-head {
  color: var(--bg) !important;
}

/* Replace visible raster logo with a mask-based colorable logo so it matches theme */
.brand { position: relative; display: inline-block; }
.brand .brand-mark { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.brand::before {
  content: '';
  display: inline-block;
  width: 128px;
  height: 128px;
  background: var(--accent);
  -webkit-mask: url('assets/logo.png') center/contain no-repeat;
  mask: url('assets/logo.png') center/contain no-repeat;
  background-size: contain !important;
}

/* Footer logo: white in dark mode, gold in light mode */
.footer-logo { position: relative; display: inline-block; }
.footer-logo { width: 128px; height: 128px; }
.footer-logo::before {
  content: '';
  display: inline-block;
  width: 128px;
  height: 128px;
  background: var(--accent);
  -webkit-mask: url('assets/logo.png') center/contain no-repeat;
  mask: url('assets/logo.png') center/contain no-repeat;
  background-size: contain !important;
}
body.dark-theme .footer-logo::before { background: var(--accent) !important; }
body.dark-theme .brand::before { background: var(--accent); }

/* Last-resort: ensure all footer text uses the theme text color */
.site-footer,
.site-footer * {
  color: var(--text) !important;
}

/* Ensure copy buttons are visible in both themes */
.copy-btn {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border: 1px solid rgba(var(--text-rgb), 0.06) !important;
}