/* ============================================================
   FOREX EVOLUTION — luxury theme system
   5 live-switchable presets. Components consume semantic vars;
   only these tokens change per theme.
   ============================================================ */

/* ---------- ORIGINAL (default · gold on charcoal) ---------- */
:root,
[data-theme="original"]{
  --bg:#0b0d12; --s1:#13161e; --s2:#1a1e28; --s3:#1e2433;
  --text:#e6e8ed; --text-2:#a8adb8; --text-3:#6b7280; --text-4:#4a5060;
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.13); --hairline:rgba(255,255,255,.05);
  --accent:#f5a623; --accent-2:#e8901a; --accent-rgb:245,166,35;
  --accent-soft:rgba(245,166,35,.12); --accent-line:rgba(245,166,35,.32);
  --pos:#10b981; --pos-rgb:16,185,129; --neg:#ef4444; --neg-rgb:239,68,68;
  --warn:#f5a623; --verified:#22c55e;
  --pos-soft:rgba(16,185,129,.13); --neg-soft:rgba(239,68,68,.13);
  --panel-bg:#13161e; --panel-blur:none; --panel-border:var(--border);
  --glow:rgba(245,166,35,.22);
  --bg-mesh:radial-gradient(90% 60% at 78% -8%,rgba(245,166,35,.08),transparent 60%),
            radial-gradient(70% 50% at 8% 4%,rgba(245,166,35,.04),transparent 55%);
  /* tiers */
  --tier-1:#5b8def; --tier-2:#b08cff; --tier-3:#f5a623; --tier-4:#d6c293;
}

/* ---------- MODERN (indigo on near-black) ---------- */
[data-theme="modern"]{
  --bg:#08080f; --s1:#101019; --s2:#17172a; --s3:#1f1f3a;
  --text:#e9e9f4; --text-2:#a6a8c4; --text-3:#6c6e8c; --text-4:#494b66;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14); --hairline:rgba(255,255,255,.05);
  --accent:#6366f1; --accent-2:#4f46e5; --accent-rgb:99,102,241;
  --accent-soft:rgba(99,102,241,.15); --accent-line:rgba(99,102,241,.4);
  --pos:#10b981; --pos-rgb:16,185,129; --neg:#ef4444; --neg-rgb:239,68,68;
  --warn:#f59e0b; --verified:#22c55e;
  --pos-soft:rgba(16,185,129,.13); --neg-soft:rgba(239,68,68,.13);
  --panel-bg:#101019; --panel-blur:none; --panel-border:var(--border);
  --glow:rgba(99,102,241,.32);
  --bg-mesh:radial-gradient(90% 60% at 80% -10%,rgba(99,102,241,.13),transparent 60%),
            radial-gradient(60% 50% at 4% 2%,rgba(139,92,246,.07),transparent 55%);
}

/* ---------- APPLE (frosted blue · glassmorphism) ---------- */
[data-theme="apple"]{
  --bg:#070b14; --s1:rgba(24,30,44,.66); --s2:rgba(34,42,60,.6); --s3:rgba(46,56,80,.62);
  --text:#f2f5fb; --text-2:#aeb6c6; --text-3:#76808f; --text-4:#525c6b;
  --border:rgba(255,255,255,.13); --border-2:rgba(255,255,255,.2); --hairline:rgba(255,255,255,.08);
  --accent:#0a84ff; --accent-2:#0060df; --accent-rgb:10,132,255;
  --accent-soft:rgba(10,132,255,.18); --accent-line:rgba(10,132,255,.4);
  --pos:#30d158; --pos-rgb:48,209,88; --neg:#ff453a; --neg-rgb:255,69,58;
  --warn:#ff9f0a; --verified:#30d158;
  --pos-soft:rgba(48,209,88,.14); --neg-soft:rgba(255,69,58,.14);
  --panel-bg:rgba(24,30,44,.55); --panel-blur:saturate(180%) blur(20px); --panel-border:rgba(255,255,255,.14);
  --glow:rgba(10,132,255,.3);
  --bg-mesh:radial-gradient(80% 55% at 75% -6%,rgba(10,132,255,.18),transparent 60%),
            radial-gradient(70% 60% at 6% 8%,rgba(94,92,230,.12),transparent 58%),
            radial-gradient(60% 50% at 96% 96%,rgba(48,209,88,.06),transparent 55%);
}

/* ---------- GAMING (neon purple + cyan on black) ---------- */
[data-theme="gaming"]{
  --bg:#060309; --s1:#0e0717; --s2:#160b26; --s3:#1f1036;
  --text:#efe9f7; --text-2:#b3a6cc; --text-3:#79698f; --text-4:#54466a;
  --border:rgba(168,85,247,.16); --border-2:rgba(168,85,247,.3); --hairline:rgba(168,85,247,.1);
  --accent:#a855f7; --accent-2:#22d3ee; --accent-rgb:168,85,247;
  --accent-soft:rgba(168,85,247,.18); --accent-line:rgba(168,85,247,.45);
  --pos:#22d3ee; --pos-rgb:34,211,238; --neg:#ff3d71; --neg-rgb:255,61,113;
  --warn:#fbbf24; --verified:#34d399;
  --pos-soft:rgba(34,211,238,.14); --neg-soft:rgba(255,61,113,.14);
  --panel-bg:#0e0717; --panel-blur:none; --panel-border:var(--border);
  --glow:rgba(168,85,247,.45);
  --bg-mesh:radial-gradient(85% 55% at 80% -8%,rgba(168,85,247,.2),transparent 58%),
            radial-gradient(70% 55% at 2% 6%,rgba(34,211,238,.12),transparent 55%),
            radial-gradient(60% 50% at 98% 98%,rgba(168,85,247,.1),transparent 55%);
}

/* ---------- TRADING (terminal green) ---------- */
[data-theme="trading"]{
  --bg:#000505; --s1:#04110a; --s2:#06190f; --s3:#0a2113;
  --text:#d7f5e1; --text-2:#7fae90; --text-3:#4f7d60; --text-4:#365742;
  --border:rgba(34,197,94,.14); --border-2:rgba(34,197,94,.3); --hairline:rgba(34,197,94,.08);
  --accent:#22c55e; --accent-2:#16a34a; --accent-rgb:34,197,94;
  --accent-soft:rgba(34,197,94,.13); --accent-line:rgba(34,197,94,.4);
  --pos:#22c55e; --pos-rgb:34,197,94; --neg:#ff5247; --neg-rgb:255,82,71;
  --warn:#eab308; --verified:#22c55e;
  --pos-soft:rgba(34,197,94,.14); --neg-soft:rgba(255,82,71,.14);
  --panel-bg:#04110a; --panel-blur:none; --panel-border:var(--border);
  --glow:rgba(34,197,94,.3);
  --bg-mesh:radial-gradient(90% 60% at 80% -10%,rgba(34,197,94,.1),transparent 60%),
            radial-gradient(60% 50% at 4% 4%,rgba(34,197,94,.05),transparent 55%);
  --display:'JetBrains Mono','Playfair Display',serif;
}

/* ---------- fonts + scale ---------- */
:root{
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --cond:'Barlow Condensed','Inter Tight',sans-serif;
  --display:var(--serif);
  --r-sm:4px; --r:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --sh:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 4px 18px rgba(0,0,0,.4);
  --sh-pop:0 18px 50px rgba(0,0,0,.6);
  --sidebar-w:222px; --topstrip-h:48px;
  --gap:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:13.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden; transition:background .5s ease,color .5s ease;
}
#root{height:100vh}
/* cinematic atmosphere */
body::before{content:"";position:fixed;inset:0;background:var(--bg-mesh);pointer-events:none;z-index:0;transition:background .5s}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 120% at 50% 50%,transparent 58%,rgba(0,0,0,.45) 100%);}
::selection{background:rgba(var(--accent-rgb),.3)}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16);background-clip:padding-box}

/* ---------- type helpers ---------- */
.serif{font-family:var(--display)}
.cond{font-family:var(--cond)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--cond);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);font-weight:600;white-space:nowrap;flex:0 0 auto}
.eyebrow-a{font-family:var(--cond);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:600;white-space:nowrap;flex:0 0 auto}
.t2{color:var(--text-2)} .t3{color:var(--text-3)} .t4{color:var(--text-4)}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--warn)} .accent{color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}