/* ==========================================================================
   Cryptoscan24 — Dark Professional Design System
   --------------------------------------------------------------------------
   Loaded on every page AFTER each page's inline styles (via nav.php), so the
   token overrides here win. Every page on the site already reads its colours
   from these custom properties, which is what makes one file able to turn the
   whole site dark. Hard-coded leftovers are handled with targeted rules at
   the bottom of this file.
   ========================================================================== */

:root {
  /* ---- surfaces: deep navy, layered like a trading terminal ---- */
  --bg:        #0A0D14;
  --bg2:       #0D1119;
  --panel:     #121724;
  --panel2:    #171D2E;
  --border:    #232B40;
  --border2:   #2E3852;
  --rule-soft: #1B2234;

  /* ---- type ---- */
  --text:      #E9EEF8;
  --muted:     #8E99B0;
  --dim:       #6B7690;

  /* ---- market colours: neon on dark, WCAG-AA against #121724 ---- */
  --green:     #2EE6A0;
  --green-dim: #27C48A;
  --red:       #FF5D73;
  --red-dim:   #E0506A;

  /* ---- brand ---- */
  --accent:      #F0A500;
  --accent-ink:  #FFC84D;   /* readable amber for type on dark */
  --accent2:     #22C3D6;
  --purple:      #8B7CF6;

  /* ---- overlays & effects ---- */
  --spike1: rgba(255, 255, 255, 0.05);
  --spike2: rgba(255, 93, 115, 0.16);
  --glow-green: 0 0 12px rgba(46, 230, 160, 0.45);

  /* ---- aliases used by the article/docs shell (article_shell.php :root) ---- */
  --card:  var(--panel);
  --raised: var(--panel2);
  --rule:  var(--border);
  --body:  #C4CFE2;
  --link:  var(--accent-ink);
  --brand: var(--accent);

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 8px rgba(0,0,0,.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,.40), 0 1px 4px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.40);

  /* ---- motion ---- */
  --ease: cubic-bezier(.22,.68,0,1);
  --fast: .14s;
  --med:  .24s;

  color-scheme: dark;
}

/* ==========================================================================
   Base polish
   ========================================================================== */
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(139,124,246,.07), transparent 60%),
    radial-gradient(900px 450px at -10% 0%, rgba(34,195,214,.05), transparent 55%),
    var(--bg) !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(139,124,246,.35); color: #fff; }

/* Scrollbar — thin, terminal-like */
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--dim); }
*::-webkit-scrollbar-track { background: transparent; }

/* Links & buttons get a soft, fast transition */
a, button, [role="button"], input, select, textarea, summary {
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
a:hover { color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Shared components
   ========================================================================== */
/* Inputs & selects — dark fill, glow on focus */
input:not([type="checkbox"]):not([type="radio"]),
select, textarea {
  background: var(--panel2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(139,124,246,.18) !important;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--dim); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--purple); }

select option { background: var(--panel); color: var(--text); }

/* Buttons */
button, .btn, input[type="submit"], input[type="button"] {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
}
button:hover, .btn:hover { border-color: var(--border2); background: #1C2337; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* Primary actions */
button.primary, .btn-primary, button[type="submit"].primary {
  background: linear-gradient(135deg, #8B7CF6, #6D5BE0) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(139,124,246,.35);
}
button.primary:hover, .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(139,124,246,.5);
  filter: brightness(1.08);
}

/* Cards & panels — soft glassy depth */
.panel, .card, [class*="card"], .table-panel, .mover-row, .burst-row, .fs-row {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}

/* Tables */
table { border-collapse: separate; border-spacing: 0; }
tbody tr { transition: background-color var(--fast) var(--ease); }
tbody tr:hover { background: var(--panel2) !important; }
th { color: var(--muted); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
td, th { border-color: var(--rule-soft) !important; }

/* Pills / badges / segments */
.mkt-seg, [class*="seg"], [class*="pill"], [class*="badge"], [class*="chip"] {
  background: var(--panel2) !important;
  border-color: var(--border) !important;
}

/* Up/down figures */
.up, .green, [class*="pos"], .positive { color: var(--green) !important; }
.down, .red, [class*="neg"], .negative { color: var(--red) !important; }

/* Code */
code, kbd, pre, samp {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent2);
}
pre { padding: 12px 14px; overflow-x: auto; }

/* Horizontal rules */
hr { border: none; border-top: 1px solid var(--rule-soft); }

/* Images blend on dark backgrounds when they carry white backing */
img { max-width: 100%; }

/* ==========================================================================
   Hard-coded light-theme leftovers found during the audit.
   These pages set literal colours outside the token system.
   ========================================================================== */

/* home.php body fallback & inline section backgrounds */
body[style*="FAFBFC"], body[style*="F4F6F9"] { background: var(--bg) !important; }

/* Generic: any inline white-ish background that survived the token flip.
   Scoped to common structural elements so charts/canvas are untouched. */
div[style*="background:#FFF" i], div[style*="background: #FFF" i],
section[style*="background:#FFF" i], header[style*="background:#FFF" i],
footer[style*="background:#FFF" i] { background: var(--panel) !important; }

/* ---- article_shell.php hard-coded light nav ---- */
.nav { background: rgba(10,13,20,.88) !important; }
.nav-links a:hover, .crumb a:hover { color: var(--text) !important; }

/* ==========================================================================
   Print — keep it light for paper
   ========================================================================== */
@media print {
  :root { --text:#000; --muted:#444; --panel:#fff; --panel2:#f4f4f4;
          --border:#ccc; --border2:#aaa; --bg:#fff; --bg2:#fff; }
  body { background: #fff !important; }
}