/* ============================================
   QUILLEN — Light Mode
   Activated via html.light class
   ============================================ */

/* === BODY === */
html.light body {
  background-color: #f8f6ff;
  color: #1a1525;
}

/* === BASE BACKGROUNDS === */
html.light .bg-surface {
  background-color: #f8f6ff !important;
}
html.light .bg-background {
  background-color: #ffffff !important;
}
html.light .bg-surface-dim {
  background-color: #f0edfb !important;
}
html.light .bg-surface-dim\/40 {
  background-color: rgba(240, 237, 251, 0.92) !important;
}
html.light .bg-surface-container-low {
  background-color: #ece8f8 !important;
}
html.light .bg-surface-container-low\/50 {
  background-color: rgba(236, 232, 248, 0.6) !important;
}
html.light .bg-surface-container-lowest\/30 {
  background-color: rgba(230, 226, 250, 0.3) !important;
}
html.light .bg-surface-container-lowest\/40 {
  background-color: rgba(230, 226, 250, 0.5) !important;
}
html.light .bg-surface-container-lowest\/50 {
  background-color: rgba(230, 226, 250, 0.6) !important;
}

/* === NAV === */
html.light nav.fixed {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0px 0px 60px rgba(107, 33, 168, 0.04) !important;
}
html.light nav.fixed.nav-scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.06) !important;
}
html.light [data-mobile-menu-panel] {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html.light [data-mobile-menu-overlay] {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* === TEXT — GLOBAL TOKENS === */
html.light .text-white {
  color: #1a1525 !important;
}
html.light .text-white\/80 {
  color: rgba(26, 21, 37, 0.8) !important;
}
html.light .text-white\/60 {
  color: rgba(26, 21, 37, 0.6) !important;
}
html.light .text-on-surface {
  color: #1a1525 !important;
}
html.light .text-on-surface-variant {
  color: #4a4258 !important;
}
html.light .text-on-surface-variant\/50 {
  color: rgba(74, 66, 88, 0.5) !important;
}
html.light .text-on-surface-variant\/80 {
  color: rgba(74, 66, 88, 0.8) !important;
}
html.light .text-on-primary {
  color: #ffffff !important;
}
html.light .text-on-primary-container {
  color: #ffffff !important;
}
html.light .text-primary {
  color: #5b21b6 !important;
}
html.light .text-secondary {
  color: #0369a1 !important;
}
html.light .text-secondary-fixed-dim {
  color: #0284c7 !important;
}
html.light .text-tertiary {
  color: #be185d !important;
}
html.light .text-outline {
  color: #6b5e82 !important;
}
html.light .text-surface-dim {
  color: #f0edfb !important;
}

/* === TEXT — TAILWIND SLATE/VIOLET === */
html.light .text-slate-200 {
  color: #1e293b !important;
}
html.light .text-slate-300 {
  color: #334155 !important;
}
html.light .text-slate-400 {
  color: #4a5568 !important;
}
html.light .text-slate-500 {
  color: #64748b !important;
}
html.light .text-slate-600 {
  color: #475569 !important;
}
html.light .text-violet-200 {
  color: #5b21b6 !important;
}
html.light .text-violet-300 {
  color: #6d28d9 !important;
}

/* === HOVER TEXT OVERRIDES === */
html.light .hover\:text-white:hover {
  color: #1a1525 !important;
}
html.light a.text-violet-300 {
  color: #6d28d9 !important;
}
html.light a.border-violet-300\/30 {
  border-color: rgba(109, 40, 217, 0.3) !important;
}

/* === BORDERS === */
html.light .border-white\/15 {
  border-color: rgba(0, 0, 0, 0.1) !important;
}
html.light .border-white\/10 {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html.light .border-outline-variant\/10 {
  border-color: rgba(107, 33, 168, 0.08) !important;
}
html.light .border-outline-variant\/30 {
  border-color: rgba(107, 33, 168, 0.18) !important;
}
html.light .border-tertiary\/20 {
  border-color: rgba(190, 24, 93, 0.2) !important;
}
html.light .border-primary\/20 {
  border-color: rgba(91, 33, 182, 0.2) !important;
}
html.light .border-emerald-400\/20 {
  border-color: rgba(52, 211, 153, 0.25) !important;
}

/* === BG WHITE/TRANSPARENT === */
html.light .bg-white\/5 {
  background-color: rgba(0, 0, 0, 0.035) !important;
}
html.light .bg-white\/10 {
  background-color: rgba(0, 0, 0, 0.055) !important;
}
html.light .hover\:bg-white\/5:hover {
  background-color: rgba(91, 33, 182, 0.04) !important;
}
html.light .hover\:bg-white\/10:hover {
  background-color: rgba(91, 33, 182, 0.07) !important;
}

/* === HARDCODED HEX COLORS IN NAV === */
html.light .bg-\[\#0F0F1A\]\/60 {
  background-color: rgba(255, 255, 255, 0.78) !important;
}
html.light .bg-\[\#11111d\]\/95 {
  background-color: rgba(255, 255, 255, 0.98) !important;
}

/* === GLASS CARDS === */
html.light .glass-card {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(91, 33, 182, 0.1) !important;
}
html.light .glass-card:hover {
  background: rgba(255, 255, 255, 0.88) !important;
}

/* === FEATURE CARDS === */
html.light .quillen-feature-card-clean {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 237, 251, 0.95) 100%) !important;
}

/* === Q-CARD HOVER === */
html.light .q-card:hover {
  box-shadow: 0 0 0 1px rgba(91, 33, 182, 0.15), 0 24px 60px rgba(0, 0, 0, 0.08) !important;
}
html.light .quillen-card-glow:hover {
  box-shadow: 0 0 0 1px rgba(91, 33, 182, 0.18), 0 20px 60px rgba(0, 0, 0, 0.08) !important;
}

/* === BUTTON SECONDARY === */
html.light .quillen-btn-secondary {
  border-color: rgba(0, 0, 0, 0.15) !important;
}
html.light .quillen-btn-secondary:hover {
  border-color: rgba(91, 33, 182, 0.3) !important;
  background: rgba(91, 33, 182, 0.05) !important;
}

/* === HERO ORBS === */
html.light .bg-orb-violet {
  background: radial-gradient(circle, rgba(160, 120, 255, 0.1) 0%, transparent 70%) !important;
}
html.light .bg-orb-cyan {
  background: radial-gradient(circle, rgba(93, 230, 255, 0.08) 0%, transparent 70%) !important;
}
html.light .bg-orb-pink {
  background: radial-gradient(circle, rgba(255, 176, 205, 0.08) 0%, transparent 70%) !important;
}

/* === AMBIENT GLOW === */
html.light .quillen-hero-ambient::before {
  background: radial-gradient(ellipse at center, rgba(160, 120, 255, 0.07) 0%, transparent 70%) !important;
}
html.light .quillen-hero-ambient::after {
  background: radial-gradient(ellipse at center, rgba(93, 230, 255, 0.05) 0%, transparent 70%) !important;
}

/* === PLAN FEATURED === */
html.light .plan-featured {
  background: rgba(91, 33, 182, 0.04) !important;
  border-color: rgba(91, 33, 182, 0.2) !important;
}
html.light .plan-featured::before {
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.04) 0%, rgba(3, 105, 161, 0.03) 100%) !important;
}

/* === GRADIENT DIRECTION OVERLAYS === */
html.light .bg-gradient-to-tr {
  --tw-gradient-from-default: rgba(240, 237, 251, 0.8);
}
html.light .from-surface-container-lowest {
  --tw-gradient-from: rgba(230, 226, 250, 0.6) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(230, 226, 250, 0) var(--tw-gradient-to-position) !important;
}
html.light .from-background {
  --tw-gradient-from: #f8f6ff var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(248, 246, 255, 0) var(--tw-gradient-to-position) !important;
}

/* === SECONDARY COLORS === */
html.light .bg-secondary {
  background-color: #0369a1 !important;
}
html.light .bg-secondary-container {
  background-color: #0284c7 !important;
}
html.light .bg-secondary-container\/10 {
  background-color: rgba(3, 105, 161, 0.08) !important;
}

/* === TECH CAROUSEL === */
html.light .tech-carousel {
  opacity: 0.4 !important;
}

/* === CHAT MOCK === */
html.light .q-chat-mock {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(91, 33, 182, 0.1) !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(91, 33, 182, 0.05) !important;
}
html.light .q-chat-titlebar {
  background: rgba(240, 237, 251, 0.9) !important;
  border-color: rgba(91, 33, 182, 0.06) !important;
}
html.light .q-msg-bubble-ai {
  background: rgba(91, 33, 182, 0.06) !important;
  border-color: rgba(91, 33, 182, 0.1) !important;
  color: #1a1525 !important;
}
html.light .q-msg-bubble-user {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  color: #4a4258 !important;
}
html.light .q-msg-avatar-user {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(26, 21, 37, 0.55) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html.light .q-typing span {
  background: rgba(91, 33, 182, 0.35) !important;
}
html.light .q-chat-status {
  color: rgba(3, 105, 161, 0.75) !important;
}
html.light .q-status-dot {
  background: #0369a1 !important;
}

/* === FOOTER === */
html.light .q-footer {
  background: #ece8f8 !important;
}
html.light .q-footer::before {
  background: linear-gradient(90deg, transparent, rgba(91, 33, 182, 0.2), rgba(3, 105, 161, 0.12), transparent) !important;
}
html.light .q-footer-cta {
  border-color: rgba(0, 0, 0, 0.05) !important;
}
html.light .q-footer-logo {
  background: linear-gradient(135deg, rgba(26, 21, 37, 0.9), rgba(91, 33, 182, 0.75)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html.light .q-footer-link {
  color: rgba(74, 66, 88, 0.65) !important;
}
html.light .q-footer-link:hover {
  color: rgba(26, 21, 37, 0.92) !important;
}
html.light .q-footer-heading {
  color: rgba(91, 33, 182, 0.55) !important;
}
html.light .q-footer-email-btn {
  border-color: rgba(91, 33, 182, 0.2) !important;
  color: rgba(91, 33, 182, 0.8) !important;
  background: rgba(91, 33, 182, 0.04) !important;
}
html.light .q-footer-email-btn:hover {
  border-color: rgba(91, 33, 182, 0.38) !important;
  background: rgba(91, 33, 182, 0.08) !important;
  color: #1a1525 !important;
}

/* === INLINE STYLE OVERRIDES (footer text) === */
html.light [style*="color:rgba(203,195,215"] {
  color: rgba(74, 66, 88, 0.65) !important;
}
html.light [style*="color:rgba(203,195,215,0.3)"] {
  color: rgba(74, 66, 88, 0.4) !important;
}

/* === CHECKMARK === */
html.light .checkmark {
  color: #0369a1 !important;
}

/* === POLICY PAGES === */
html.light .quillen-policy-page {
  color: #1a1525;
}

/* === SELECTION === */
html.light ::selection {
  background: rgba(91, 33, 182, 0.18) !important;
  color: #1a1525 !important;
}

/* === THEME TOGGLE BUTTON (light state) === */
html.light #theme-toggle {
  border-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1a1525 !important;
}
html.light #theme-toggle:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}
html.light [data-mobile-menu-toggle] {
  border-color: rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1a1525 !important;
}

/* === COOKIE CONSENT BANNER === */
html.light [data-cookie-consent] .bg-\[\#11111d\]\/95,
html.light [data-cookie-consent] > div {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.1) !important;
}
html.light [data-cookie-consent] p,
html.light [data-cookie-consent] .text-white {
  color: #1a1525 !important;
}
html.light [data-cookie-consent] .text-slate-300 {
  color: #4a5568 !important;
}
html.light [data-cookie-consent] .text-slate-300:hover {
  color: #1a1525 !important;
}

/* === SMOOTH TRANSITIONS ON THEME SWITCH === */
html.light body,
html.light nav.fixed,
html.light .glass-card,
html.light .q-footer,
html.light .q-chat-mock,
html.light .q-chat-titlebar,
html.light .q-msg-bubble-ai,
html.light .q-msg-bubble-user {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}