/* ============================= THEME VARIABLES ============================= */

/* Default Dark Theme */
:root {
  --bg: #0A0A0B;
  --surface: #17171A;
  --surface-2: #202023;
  --surface-3: #26262A;
  --border: #26262A;
  --border-soft: #1E1E21;
  --text: #FFFFFF;
  --text-dim: #8A8A93;
  --text-faint: #616168;
  --orange: #FF6B00;
  --orange-glow: rgba(255,107,0,0.55);
}

/* Light Theme Overrides */
.light-theme {
  --bg: #F9F9FB;
  --surface: #FFFFFF;
  --surface-2: #F2F2F4;
  --surface-3: #E9E9EC;
  --border: #E0E0E5;
  --border-soft: #E9E9EC;
  --text: #141416;
  --text-dim: #616168;
  --text-faint: #9A9AA3;
  --orange-glow: rgba(255, 107, 0, .15);
}

/* ============================= GLOBAL STYLES ============================= */

body {
  background-color: var(--bg);
  color: var(--text);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: background-color 0.3s, color 0.3s;
}

@media (display-mode: standalone) {
  body {
    padding-top: max(env(safe-area-inset-top, 0px), 60px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
  }
}

/* ============================= THEME OVERRIDES ============================= */
/* When .light-theme is active, we override the default dark classes */
.light-theme .bg-midnight { background-color: var(--bg) !important; }
.light-theme .text-white { color: var(--text) !important; }
.light-theme .text-ash { color: var(--text-dim) !important; }
.light-theme .text-ash\/60 { color: var(--text-faint) !important; }
.light-theme .bg-charcoal { background-color: var(--surface) !important; }
.light-theme .border-white\/10 { border-color: var(--border) !important; }
.light-theme .hover\:text-white:hover { color: var(--text) !important; }
.light-theme .hover\:text-hviz:hover { color: var(--orange) !important; }
.light-theme .text-hviz { color: var(--orange) !important; }
.light-theme .bg-hviz { background-color: var(--orange) !important; }
.light-theme .shadow-glow { box-shadow: 0 0 40px -8px var(--orange-glow) !important; }
.light-theme .form-heading { color: var(--text) !important; border-bottom-color: var(--border) !important; }
.light-theme .account-type-card { background-color: var(--surface) !important; }

.light-theme .form-input,
.light-theme .rounded-xl.px-4.py-3\.5,
.light-theme .bg-midnight {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.light-theme .form-input::placeholder,
.light-theme .placeholder-ash\/60::placeholder {
  color: var(--text-faint) !important;
}
.light-theme .focus\:ring-hviz:focus {
  --tw-ring-color: var(--orange) !important;
}

.light-theme .text-white { color: var(--text); }
.light-theme .text-ash { color: var(--text-dim); }
.light-theme .text-ash\/60 { color: var(--text-faint); }

/* ============================= THEME TOGGLE PILL ============================= */

.theme-toggle-pill {
  display: flex;
  align-items: center;
  padding: 3px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  position: relative;
  cursor: pointer;
  width: 56px; /* Fixed width */
  height: 32px; /* Fixed height */
}

.theme-toggle-pill .toggle-indicator {
  width: 24px;
  height: 24px;
  background-color: var(--orange);
  border-radius: 50%;
  position: absolute;
  left: 3px;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-pill .toggle-indicator svg {
  width: 12px; height: 12px; color: #fff;
}

.light-theme .theme-toggle-pill .toggle-indicator {
  transform: translateX(24px);
}

/* Add this to your /css/global.css file */

.toast::after,
.toast::before {
  content: none !important;
}

/* Utility to hide the scrollbar for a cleaner look on horizontal scrolling elements */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}