/* ===== Global Theme Architecture — solid surfaces, WCAG AA/AAA text contrast ===== */
/* Dark (default) + Light. Every token below is defined for EVERY theme value,
   including the legacy "orange"/"exchange" aliases, so no variable ever falls
   through to the :root dark palette on a light surface (that mismatch was the
   source of invisible text and wrong-coloured buttons). */

/* ---------- semantic status palette (light-safe values) ---------- */
:root,
html[data-theme="dark"] {
  --bg-primary: #0B0F19;
  --bg-secondary: #151C2C;
  --bg-card: #151C2C;
  --bg-elevated: #1B2436;
  --border-card: #1E293B;
  --border-color: #1E293B;
  --border-strong: #334155;
  --text-primary: #F8FAFC;
  --text-heading: #F8FAFC;
  --text-secondary: #A8B4C6;
  --text-muted: #94A3B8;
  --text-on-accent: #FFFFFF;
  --input-bg: #1E293B;
  --input-border: #334155;
  --input-text: #F8FAFC;
  --placeholder: #8A97AB;
  --nav-bg: #151C2C;
  --nav-bg-solid: #151C2C;
  --accent: #818CF8;
  --accent-strong: #6366F1;
  --accent-soft: rgba(129,140,248,.16);
  --accent-rgb: 129,140,248;
  --accent-gradient: linear-gradient(135deg, #818CF8 0%, #4F46E5 100%);
  --link-color: #A5B4FC;
  --link-hover: #C7D2FE;
  --shadow-card: 0 20px 60px -12px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
  /* status text + tint pairs (dark: light text on dark tint) */
  --success-text: #4ADE80;
  --success-bg: rgba(16,185,129,.14);
  --success-border: rgba(16,185,129,.34);
  --danger-text: #FCA5A5;
  --danger-bg: rgba(239,68,68,.13);
  --danger-border: rgba(239,68,68,.34);
  --warning-text: #FCD34D;
  --warning-bg: rgba(245,158,11,.14);
  --warning-border: rgba(245,158,11,.34);
  --info-text: #93C5FD;
  --info-bg: rgba(59,130,246,.14);
  --info-border: rgba(59,130,246,.34);
  --violet-text: #C4B5FD;
  --violet-bg: rgba(139,92,246,.15);
  --violet-border: rgba(139,92,246,.34);
  --error-bg: rgba(239,68,68,.10);
  --error-border: rgba(239,68,68,.30);
  --error-text: #FCA5A5;
  --header-h: 56px;
  --nav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg-primary: #F8FAFC;
  --bg-secondary: #F1F5F9;
  --bg-card: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --border-card: #E2E8F0;
  --border-color: #E2E8F0;
  --border-strong: #CBD5E1;
  --text-primary: #0F172A;
  --text-heading: #0B1220;
  --text-secondary: #475569;
  --text-muted: #475569;
  --text-on-accent: #FFFFFF;
  --input-bg: #F1F5F9;
  --input-border: #CBD5E1;
  --input-text: #0F172A;
  --placeholder: #64748B;
  --nav-bg: #FFFFFF;
  --nav-bg-solid: #FFFFFF;
  --accent: #4338CA;
  --accent-strong: #3730A3;
  --accent-soft: rgba(67,56,202,.10);
  --accent-rgb: 67,56,202;
  --accent-gradient: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
  --link-color: #4338CA;
  --link-hover: #3730A3;
  --shadow-card: 0 8px 32px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.06);
  /* status text: DARK values on white — the old #0ECB81/#F6465D/#F0B90B were
     exchange-terminal colours and failed contrast badly on a light surface. */
  --success-text: #047857;
  --success-bg: #ECFDF5;
  --success-border: #A7F3D0;
  --danger-text: #B91C1C;
  --danger-bg: #FEF2F2;
  --danger-border: #FECACA;
  --warning-text: #92400E;
  --warning-bg: #FFFBEB;
  --warning-border: #FDE68A;
  --info-text: #1D4ED8;
  --info-bg: #EFF6FF;
  --info-border: #BFDBFE;
  --violet-text: #6D28D9;
  --violet-bg: #F5F3FF;
  --violet-border: #DDD6FE;
  --error-bg: #FEF2F2;
  --error-border: #FECACA;
  --error-text: #B91C1C;
  --header-h: 56px;
  --nav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

/* ---------- Legacy aliases: full token sets (never inherit dark on light) ---------- */
html[data-theme="orange"] {
  --bg-primary:#F8FAFC; --bg-secondary:#F1F5F9; --bg-card:#FFFFFF; --bg-elevated:#FFFFFF;
  --border-card:#E2E8F0; --border-color:#E2E8F0; --border-strong:#CBD5E1;
  --text-primary:#0F172A; --text-heading:#0B1220; --text-secondary:#475569; --text-muted:#475569;
  --text-on-accent:#FFFFFF;
  --input-bg:#F1F5F9; --input-border:#CBD5E1; --input-text:#0F172A; --placeholder:#64748B;
  --nav-bg:#FFFFFF; --nav-bg-solid:#FFFFFF;
  --accent:#4338CA; --accent-strong:#3730A3; --accent-soft:rgba(67,56,202,.10);
  --accent-rgb:67,56,202; --accent-gradient:linear-gradient(135deg,#4F46E5 0%,#4338CA 100%);
  --link-color:#4338CA; --link-hover:#3730A3;
  --shadow-card:0 8px 32px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.06);
  --success-text:#047857; --success-bg:#ECFDF5; --success-border:#A7F3D0;
  --danger-text:#B91C1C; --danger-bg:#FEF2F2; --danger-border:#FECACA;
  --warning-text:#92400E; --warning-bg:#FFFBEB; --warning-border:#FDE68A;
  --info-text:#1D4ED8; --info-bg:#EFF6FF; --info-border:#BFDBFE;
  --violet-text:#6D28D9; --violet-bg:#F5F3FF; --violet-border:#DDD6FE;
  --error-bg:#FEF2F2; --error-border:#FECACA; --error-text:#B91C1C;
  color-scheme:light;
}
html[data-theme="exchange"] {
  --bg-primary:#0B0F19; --bg-secondary:#151C2C; --bg-card:#151C2C; --bg-elevated:#1B2436;
  --border-card:#1E293B; --border-color:#1E293B; --border-strong:#334155;
  --text-primary:#F8FAFC; --text-heading:#F8FAFC; --text-secondary:#A8B4C6; --text-muted:#94A3B8;
  --text-on-accent:#FFFFFF;
  --input-bg:#1E293B; --input-border:#334155; --input-text:#F8FAFC; --placeholder:#8A97AB;
  --nav-bg:#151C2C; --nav-bg-solid:#151C2C;
  --accent:#818CF8; --accent-strong:#6366F1; --accent-soft:rgba(129,140,248,.16);
  --accent-rgb:129,140,248; --accent-gradient:linear-gradient(135deg,#818CF8 0%,#4F46E5 100%);
  --link-color:#A5B4FC; --link-hover:#C7D2FE;
  --shadow-card:0 20px 60px -12px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
  --success-text:#4ADE80; --success-bg:rgba(16,185,129,.14); --success-border:rgba(16,185,129,.34);
  --danger-text:#FCA5A5; --danger-bg:rgba(239,68,68,.13); --danger-border:rgba(239,68,68,.34);
  --warning-text:#FCD34D; --warning-bg:rgba(245,158,11,.14); --warning-border:rgba(245,158,11,.34);
  --info-text:#93C5FD; --info-bg:rgba(59,130,246,.14); --info-border:rgba(59,130,246,.34);
  --violet-text:#C4B5FD; --violet-bg:rgba(139,92,246,.15); --violet-border:rgba(139,92,246,.34);
  --error-bg:rgba(239,68,68,.10); --error-border:rgba(239,68,68,.30); --error-text:#FCA5A5;
  color-scheme:dark;
}

* { -webkit-tap-highlight-color: transparent; }
html { height: -webkit-fill-available; }

/* ——— Global solid background — remove all mesh/grid/radial ——— */
body {
  background: var(--bg-primary) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}
.bg-scene, .bg-grid, .bg-mesh, .grid-bg, .orb, .hero-orb { display: none !important; }
.orb-1, .orb-2 { display: none !important; }
body::before, body::after { background-image: none !important; }

/* ——— Cards / Surfaces ——— */
.auth-card, .glass-card, .card, .card-lift, .card-glass,
.terminal, .cmp-card, .sig-card, .idx-mkt-wrap, .earn-tile {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-primary) !important;
}
.card:hover, .card-lift:hover { border-color: var(--border-card) !important; transform: none !important; }

/* ——— Navbar ——— */
.nav-glass, .header-bar, .bottom-nav-bar {
  background: var(--nav-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--border-color) !important;
}
.header-bar { border-bottom: 1px solid var(--border-color) !important; }
.bottom-nav-bar { border-top: 1px solid var(--border-color) !important; }

/* ——— Inputs — high contrast ——— */
.input-field, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"], input[type="search"],
select, textarea {
  background: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  color: var(--input-text) !important;
  -webkit-text-fill-color: var(--input-text) !important;
  caret-color: var(--input-text) !important;
}
.input-field::placeholder, input::placeholder, textarea::placeholder { color: var(--placeholder) !important; opacity: 1 !important; }
.input-field:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}
select option { background: var(--bg-card) !important; color: var(--text-primary) !important; }
.field-label { color: var(--text-secondary) !important; }
.input-wrap > .field-icon { color: var(--text-muted) !important; }
.input-wrap:focus-within > .field-icon { color: var(--accent) !important; }

/* ——— Buttons — accent gradient with guaranteed readable label ——— */
.btn-primary, .btn-glow {
  background: var(--accent-gradient) !important;
  color: var(--text-on-accent) !important;
  -webkit-text-fill-color: var(--text-on-accent) !important;
  border: none !important;
  box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), .5) !important;
}
.btn-primary:hover, .btn-glow:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:disabled, .btn-glow:disabled { opacity: .55; filter: none; transform: none; cursor: not-allowed; }
.btn-soft { background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; color: var(--text-primary) !important; }

/* ——— Links ——— */
.link-accent { color: var(--link-color) !important; }
.link-accent:hover { color: var(--link-hover) !important; }
.footer-link { color: var(--text-secondary) !important; }
.footer-link:hover { color: var(--link-color) !important; }

/* ——— Theme toggle button ——— */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--border-card);
  color: var(--text-secondary); cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: all .2s ease;
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--accent); }
.theme-toggle:active { transform: scale(.95); }

/* ——— Semantic Tailwind text colours (theme-aware, contrast-checked) ——— */
.text-green-500, .text-green-600, .text-emerald-500, .text-emerald-600,
.text-green-700, .text-emerald-700 { color: var(--success-text) !important; }
.text-red-500, .text-red-600, .text-rose-500, .text-rose-600 { color: var(--danger-text) !important; }
.text-amber-500, .text-amber-600, .text-yellow-500, .text-yellow-600 { color: var(--warning-text) !important; }
.text-blue-500, .text-blue-600, .text-blue-700, .text-indigo-500, .text-indigo-600,
.text-indigo-700, .text-violet-500, .text-violet-600 { color: var(--accent) !important; }
.text-purple-500, .text-purple-600, .text-purple-700 { color: var(--violet-text) !important; }
.text-green-400, .text-emerald-400 { color: var(--success-text) !important; }
.text-red-400, .text-rose-400 { color: var(--danger-text) !important; }
.text-amber-400, .text-yellow-400 { color: var(--warning-text) !important; }

/* ——— Pastel chip backgrounds: tint the surface, keep the text readable ———
   Without this, `bg-green-100 text-green-600` stayed a bright pastel box in
   dark mode and the remapped bright-green text became unreadable on it. */
html[data-theme="dark"] .bg-green-100, html[data-theme="dark"] .bg-emerald-100,
html[data-theme="dark"] .bg-green-50,  html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-teal-100,  html[data-theme="dark"] .bg-teal-50 {
  background: var(--success-bg) !important; color: var(--success-text) !important;
}
html[data-theme="dark"] .bg-red-100, html[data-theme="dark"] .bg-rose-100,
html[data-theme="dark"] .bg-red-50,  html[data-theme="dark"] .bg-rose-50 {
  background: var(--danger-bg) !important; color: var(--danger-text) !important;
}
html[data-theme="dark"] .bg-amber-100, html[data-theme="dark"] .bg-yellow-100,
html[data-theme="dark"] .bg-amber-50,  html[data-theme="dark"] .bg-yellow-50,
html[data-theme="dark"] .bg-orange-100, html[data-theme="dark"] .bg-orange-50 {
  background: var(--warning-bg) !important; color: var(--warning-text) !important;
}
html[data-theme="dark"] .bg-blue-100, html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-sky-100,  html[data-theme="dark"] .bg-sky-50,
html[data-theme="dark"] .bg-cyan-100, html[data-theme="dark"] .bg-cyan-50 {
  background: var(--info-bg) !important; color: var(--info-text) !important;
}
html[data-theme="dark"] .bg-purple-100, html[data-theme="dark"] .bg-purple-50,
html[data-theme="dark"] .bg-violet-100, html[data-theme="dark"] .bg-violet-50,
html[data-theme="dark"] .bg-indigo-100, html[data-theme="dark"] .bg-indigo-50 {
  background: var(--violet-bg) !important; color: var(--violet-text) !important;
}
html[data-theme="light"] .bg-green-100, html[data-theme="light"] .bg-green-50,
html[data-theme="light"] .bg-blue-100,  html[data-theme="light"] .bg-blue-50,
html[data-theme="light"] .bg-amber-100, html[data-theme="light"] .bg-yellow-100,
html[data-theme="light"] .bg-red-100,   html[data-theme="light"] .bg-red-50,
html[data-theme="light"] .bg-purple-100, html[data-theme="light"] .bg-indigo-100 { color: var(--text-primary) !important; }

/* Pastel borders follow the tinted surface in dark mode */
html[data-theme="dark"] .border-green-100, html[data-theme="dark"] .border-green-200,
html[data-theme="dark"] .border-emerald-100, html[data-theme="dark"] .border-emerald-200 { border-color: var(--success-border) !important; }
html[data-theme="dark"] .border-red-100, html[data-theme="dark"] .border-red-200,
html[data-theme="dark"] .border-rose-100, html[data-theme="dark"] .border-rose-200 { border-color: var(--danger-border) !important; }
html[data-theme="dark"] .border-amber-100, html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-yellow-100, html[data-theme="dark"] .border-yellow-200 { border-color: var(--warning-border) !important; }
html[data-theme="dark"] .border-blue-100, html[data-theme="dark"] .border-blue-200,
html[data-theme="dark"] .border-sky-100, html[data-theme="dark"] .border-sky-200 { border-color: var(--info-border) !important; }
html[data-theme="dark"] .border-purple-100, html[data-theme="dark"] .border-purple-200,
html[data-theme="dark"] .border-indigo-100, html[data-theme="dark"] .border-violet-200 { border-color: var(--violet-border) !important; }

/* ——— Neutral utility remaps ——— */
.bg-white { background-color: var(--bg-card) !important; }
.bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100 { background-color: var(--bg-secondary) !important; }
.bg-slate-200, .bg-gray-200 { background-color: var(--input-bg) !important; }
.bg-slate-900, .bg-gray-900, .bg-slate-950, .bg-gray-950 { background-color: var(--bg-primary) !important; }
.bg-slate-800, .bg-gray-800 { background-color: var(--bg-card) !important; }
.text-slate-950, .text-gray-950, .text-slate-900, .text-gray-900,
.text-slate-800, .text-gray-800 { color: var(--text-heading) !important; }
.text-slate-700, .text-gray-700 { color: var(--text-primary) !important; }
.text-slate-600, .text-gray-600 { color: var(--text-secondary) !important; }
.text-slate-500, .text-gray-500, .text-slate-400, .text-gray-400,
.text-slate-300, .text-gray-300 { color: var(--text-muted) !important; }
.border-slate-100, .border-slate-200, .border-slate-300,
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--border-color) !important; }
.border-slate-700, .border-slate-800, .border-gray-700, .border-gray-800 { border-color: var(--border-strong) !important; }
.bg-blue-600 { background: var(--accent-gradient) !important; color: var(--text-on-accent) !important; -webkit-text-fill-color: var(--text-on-accent) !important; }
.bg-indigo-600 { background: var(--accent-gradient) !important; color: var(--text-on-accent) !important; -webkit-text-fill-color: var(--text-on-accent) !important; }
.hover\:bg-slate-100:hover, .hover\:bg-slate-50:hover, .hover\:bg-gray-100:hover,
.hover\:bg-slate-200:hover, .hover\:bg-gray-200:hover { background-color: var(--accent-soft) !important; }
.hover\:bg-blue-700:hover, .hover\:bg-indigo-700:hover { background-color: var(--accent-strong) !important; }
.hover\:text-slate-900:hover, .hover\:text-slate-800:hover, .hover\:text-gray-900:hover { color: var(--text-primary) !important; }
.hover\:text-green-700:hover { color: var(--success-text) !important; }
.hover\:text-red-700:hover, .hover\:text-red-800:hover { color: var(--danger-text) !important; }
.hover\:text-blue-800:hover { color: var(--link-hover) !important; }

/* ——— Tape / market extras ——— */
.tape-wrap { background: var(--nav-bg) !important; border-bottom: 1px solid var(--border-color) !important; }
.idx-search { background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; }
.idx-search input { color: var(--input-text) !important; }
.idx-tab { background: var(--input-bg) !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; }
.idx-tab.active { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent) !important; }
.idx-mkt-name, .idx-mkt-price { color: var(--text-heading) !important; }

.terminal .shine, .btn-primary .shine { opacity: .7; }
.error-box { background: var(--error-bg) !important; border-color: var(--error-border) !important; color: var(--error-text) !important; }

/* ===== Universal white/dark scan — all sections text/UI fix ===== */
html[data-theme="light"] .bg-\[\#0a0e14\], html[data-theme="light"] .bg-\[\#060a06\],
html[data-theme="light"] .bg-\[\#0d1322\], html[data-theme="light"] .bg-\[\#0c1210\] { background: var(--bg-card) !important; }
html[data-theme] .dur-pill { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-secondary) !important; }
html[data-theme] .dur-pill.active { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
html[data-theme] .amount-row { background: var(--input-bg) !important; border-color: var(--input-border) !important; }
html[data-theme] .amount-row input { color: var(--input-text) !important; -webkit-text-fill-color: var(--input-text) !important; }
html[data-theme] .wallet-toggle .wt-btn { background: var(--input-bg) !important; border-color: var(--input-border) !important; }
html[data-theme] .past-trade-card, html[data-theme] .active-order-card { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
html[data-theme] .controls-area::-webkit-scrollbar-thumb { background: var(--border-color) !important; }
html[data-theme] .card, html[data-theme] .reveal { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
html[data-theme="light"] .bg-slate-400\/30 { background: var(--bg-card) !important; border-color: var(--border-color) !important; backdrop-filter: none !important; }
html[data-theme] [class*="bg-slate-"], html[data-theme] [class*="bg-gray-"] { border-color: var(--border-color) !important; }
html[data-theme] [class*="text-slate-800"], html[data-theme] [class*="text-slate-900"],
html[data-theme] [class*="text-gray-800"], html[data-theme] [class*="text-gray-900"] { color: var(--text-heading) !important; }

/* ===== Final legibility safety net =====
   Tiny helper text (9–11px) is used all over the app; these two rules keep it
   inside WCAG AA in both themes no matter what background it lands on. */
html[data-theme] small, html[data-theme] .text-\[9px\], html[data-theme] .text-\[10px\],
html[data-theme] .text-\[11px\] { letter-spacing: .01em; }
html[data-theme="dark"] .text-slate-500, html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-slate-300, html[data-theme="dark"] .text-gray-300 { color: var(--text-muted) !important; }
html[data-theme="light"] .text-slate-500, html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-gray-500, html[data-theme="light"] .text-gray-400,
html[data-theme="light"] .text-slate-300, html[data-theme="light"] .text-gray-300 { color: var(--text-muted) !important; }

/* OHLC / price colours stay exchange-accurate, but each theme gets a value
   that clears AA against its own surface. */
html[data-theme="light"] .text-green-600 { color: #047857 !important; }
html[data-theme="dark"]  .text-green-600 { color: #0ECB81 !important; }
html[data-theme="light"] .text-red-500 { color: #B91C1C !important; }
html[data-theme="dark"]  .text-red-500 { color: #F6465D !important; }