/* ── RankLoco Theme ────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;
  /* Non-color variables — same in both themes */
  --radius:    12px;
  --radius-lg: 18px;
  --nav-h:     58px;
  --sidebar-w: 260px;
}

/* Force nav always dark regardless of theme */
.topnav {
  background: rgba(10,10,15,0.97) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: #F0EFF8 !important;
}
.topnav .nav-user { color: #9896AA !important; }
.topnav .nav-user strong { color: #F0EFF8 !important; }
.topnav .btn-sm.btn-outline { color: #9896AA !important; border-color: rgba(255,255,255,0.13) !important; }
.topnav .btn-sm.btn-outline:hover { color: #F0EFF8 !important; background: rgba(255,255,255,0.06) !important; }
.topnav button { color: #9896AA !important; }
.topnav button:not(.btn-primary):not(.theme-toggle):not(.gear-btn):hover { color: #F0EFF8 !important; }
.topnav .nav-logo { color: #F0EFF8 !important; }
.topnav .nav-logo span { color: #5BFF8A !important; }
.topnav .nav-links a:hover { color: #F0EFF8 !important; }
.topnav .btn-primary,
.topnav .btn-sm.btn-primary { color: #000 !important; }
.topnav .btn-primary:hover,
.topnav .btn-sm.btn-primary:hover { color: #fff !important; background: rgba(91,255,138,0.85) !important; }
.topnav .nav-menu-btn span { background: #9896AA !important; }
.topnav .theme-toggle { color: #9896AA !important; }

/* Dark theme (default) */
[data-theme="dark"], :root:not([data-theme="light"]) {
  --bg:       #0A0A0F;
  --surface:  #13131A;
  --surface2: #1C1C26;
  --surface3: #22222E;
  --border:   rgba(255,255,255,0.08);
  --border2:  rgba(255,255,255,0.13);
  --text:     #F0EFF8;
  --muted:    #9896AA;
  --muted2:   #6B6980;
  --accent:   #5BFF8A;
  --accent-dim: rgba(91,255,138,0.12);
  --accent-text: #000;
  --red:      #FF5B5B;
  --red-dim:  rgba(255,91,91,0.12);
  --amber:    #FFB347;
  --amber-dim:rgba(255,179,71,0.12);
  --blue:     #5B9FFF;
  --blue-dim: rgba(91,159,255,0.12);
  --shadow:   0 4px 24px rgba(0,0,0,0.4);
  --theme-icon: '☀️';
}

/* Light theme */
[data-theme="light"] {
  --bg:       #F8F8FC;
  --surface:  #FFFFFF;
  --surface2: #F0F0F6;
  --surface3: #E8E8F0;
  --border:   rgba(0,0,0,0.08);
  --border2:  rgba(0,0,0,0.13);
  --text:     #111118;
  --muted:    #5A5870;
  --muted2:   #8A88A0;
  --accent:   #16A34A;
  --accent-dim: rgba(22,163,74,0.1);
  --accent-text: #fff;
  --red:      #DC2626;
  --red-dim:  rgba(220,38,38,0.1);
  --amber:    #D97706;
  --amber-dim:rgba(217,119,6,0.1);
  --blue:     #2563EB;
  --blue-dim: rgba(37,99,235,0.1);
  --shadow:   0 4px 24px rgba(0,0,0,0.08);
  --theme-icon: '🌙';
}

/* System preference fallback (no data-theme set) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:       #F8F8FC;
    --surface:  #FFFFFF;
    --surface2: #F0F0F6;
    --surface3: #E8E8F0;
    --border:   rgba(0,0,0,0.08);
    --border2:  rgba(0,0,0,0.13);
    --text:     #111118;
    --muted:    #5A5870;
    --muted2:   #8A88A0;
    --accent:   #16A34A;
    --accent-dim: rgba(22,163,74,0.1);
    --accent-text: #fff;
    --red:      #DC2626;
    --red-dim:  rgba(220,38,38,0.1);
    --amber:    #D97706;
    --amber-dim:rgba(217,119,6,0.1);
    --blue:     #2563EB;
    --blue-dim: rgba(37,99,235,0.1);
    --shadow:   0 4px 24px rgba(0,0,0,0.08);
  }
}

/* Accent button text — black in dark mode (bright green), white in light mode (dark green) */
.btn-submit, .btn-primary, .btn-audit, .btn-run,
.btn-plan-primary, .btn-big, .btn-upgrade, .nav-cta {
  color: var(--accent-text, #000) !important;
}
.theme-toggle {
  background: none;
  border: none;
  outline: none;
  padding: 6px 9px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  transition: opacity 0.15s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:focus, .theme-toggle:active, .theme-toggle:focus-visible { outline: none; box-shadow: none; }

/* Prevent iOS zoom on input focus — iOS zooms when font-size < 16px */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Force white text on accent buttons in light mode */
[data-theme="light"] .unlock-btn,
[data-theme="light"] .btn-audit,
[data-theme="light"] .btn-submit,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-upgrade,
[data-theme="light"] .btn-plan-primary {
  color: #fff !important;
}

/* Gear/house nav button */
.gear-btn {
  background: none;
  border: none;
  outline: none;
  padding: 5px 8px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.gear-btn:focus, .gear-btn:active, .gear-btn:focus-visible { outline: none; box-shadow: none; }
.topnav .gear-btn { opacity: 1; }

/* Force dark nav on public PHP pages (about, pricing, blog, etc.) */
.site-nav {
  background: rgba(10,10,15,0.97) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.site-nav-logo { color: #F0EFF8 !important; }
.site-nav-logo span { color: #5BFF8A !important; }
.site-nav-link { color: #9896AA !important; }
.site-nav-link:hover { color: #F0EFF8 !important; }
.site-nav-cta { background: var(--accent) !important; color: #000 !important; }
.nav-menu-btn span { background: #9896AA !important; }
.nav-menu-btn:hover span { background: #F0EFF8 !important; }
/* Force index.html nav link colors in light mode */
[data-theme="light"] .nav-login { color: #9896AA !important; }
[data-theme="light"] .nav-links a { color: #9896AA !important; }