/* Eco unification — maps the access gate and landing onto the Sniper Charts
   look (see srus-tokens.css). Loaded AFTER access-gate.css / landing.css, it
   only re-points variables and softens the neon-era components; nothing in
   the original sheets is rewritten. */

/* ── access gate ─────────────────────────────────────────────────────────── */
:root {
  --ag-bg:      var(--sc-bg);
  --ag-panel:   rgba(13, 16, 23, 0.94);
  --ag-card:    rgba(20, 25, 34, 0.88);
  --ag-line:    var(--sc-line);
  --ag-fg:      var(--sc-text);
  --ag-muted:   var(--sc-muted);
  --ag-accent:  var(--sc-accent);
  --ag-purple:  var(--sc-violet);
  --ag-cyan:    var(--sc-blue);
  --ag-font:    var(--sc-sans);
}

/* buttons: flat chart style instead of pill neon */
.ag-btn {
  border-radius: var(--sc-radius);
  border-color: var(--sc-line-2);
  background: var(--sc-bg-2);
  font-weight: 600;
}
.ag-btn:hover { background: var(--sc-bg-3); }
.ag-btn.primary {
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.45);
  color: var(--sc-accent);
}
.ag-btn.primary:hover {
  background: rgba(52, 211, 153, 0.22);
  border-color: rgba(52, 211, 153, 0.65);
}
.ag-btn.sacrifice {
  background: rgba(177, 77, 255, 0.12);
  border-color: rgba(177, 77, 255, 0.45);
  color: var(--sc-violet-2);
}
.ag-btn.sacrifice:hover { background: rgba(177, 77, 255, 0.2); }
.ag-btn.ghost { background: transparent; color: var(--sc-muted); }
.ag-btn.ghost:hover { background: var(--sc-bg-3); color: var(--sc-text); }

/* cards & inputs pick up the chart's radii and borders */
.ag-shell input[type="email"],
.ag-shell input[type="text"],
.ag-shell input[type="password"],
.ag-modal input[type="email"],
.ag-modal input[type="text"] {
  border-radius: var(--sc-radius) !important;
  background: var(--sc-bg-2) !important;
  border-color: var(--sc-line-2) !important;
  color: var(--sc-text) !important;
}
.ag-shell input:focus,
.ag-modal input:focus { border-color: rgba(52, 211, 153, 0.55) !important; }

/* numbers read like the chart: tabular */
.ag-pass-price, .ag-countdown, .ag-hint strong, .ag-active-pass strong {
  font-variant-numeric: tabular-nums;
}

/* ── landing ─────────────────────────────────────────────────────────────── */
.landing-root, .lp-page, body.lp {
  --lp-bg:      var(--sc-bg);
  --lp-bg2:     var(--sc-bg-2);
  --lp-card:    rgba(232, 236, 244, 0.032);
  --lp-border:  var(--sc-line-2);
  --lp-fg:      var(--sc-text);
  --lp-muted:   var(--sc-muted);
  --lp-subtle:  var(--sc-faint);
  --lp-green:   var(--sc-up);
  --lp-green-2: var(--sc-good);
  --lp-purple:  var(--sc-violet);
  --lp-purple-2:var(--sc-violet-2);
  --lp-cyan:    var(--sc-blue);
  --lp-radius:  var(--sc-radius-lg);
  --lp-sans:    var(--sc-sans);
}

/* ── main dashboard app ────────────────────────────────────────────────────
   app.css keeps its own variable names; this re-points them at the chart
   tokens so the whole desk reads like the chart. The light theme keeps its own palette (this block steps aside for it). Translucent borders sit on
   the chart background and land within a hair of the old solid hexes. */
:root:not([data-theme="light"]) {
  --bg:           var(--sc-bg);
  --bg2:          var(--sc-bg-2);
  --bg3:          var(--sc-bg-3);
  --bg4:          var(--sc-bg-4);
  --fg:           var(--sc-text);
  --fg-dim:       #d5dbe8;
  --fg-muted:     var(--sc-muted);
  --fg-subtle:    var(--sc-faint);
  --accent:       var(--sc-violet);
  --accent-dim:   #7c3aed;
  --accent-glow:  rgba(177, 77, 255, 0.08);
  --green:        var(--sc-up);
  --green-dim:    #22b07d;
  --red:          var(--sc-down);
  --red-dim:      #dc2626;
  --yellow:       var(--sc-amber);
  --cyan:         var(--sc-blue);
  --purple:       var(--sc-violet);
  --blue:         var(--sc-blue);
  --border:       var(--sc-line);
  --border-light: var(--sc-line-2);
  --border-accent:rgba(177, 77, 255, 0.4);
  --glow-green:   rgba(52, 211, 153, 0.08);
  --glow-red:     rgba(248, 113, 113, 0.08);
  --glow-yellow:  rgba(251, 191, 36, 0.07);
  --glow-cyan:    rgba(76, 201, 240, 0.07);
  --glow-purple:  rgba(177, 77, 255, 0.10);
  --grid-line:    rgba(232, 236, 244, 0.05);
}