/* ═══════════════════════════════════════════════════════
   ViewFT — Shared Theme CSS
   Load after theme.js (which sets data-theme on <html>).
   Covers: design tokens, reset, body background, grid overlay, mesh-bg.
   Page layout stays in each page's own <style> block.
   ═══════════════════════════════════════════════════════ */

/* ── Dark mode tokens (default) ─────────────────────── */
:root {
  --dark-bg:          #050610;
  --card-bg:          rgba(255,255,255,0.04);
  --card-strong:      rgba(255,255,255,0.10);
  --border:           rgba(255,255,255,0.09);
  --text-primary:     #f7f8ff;
  --text-secondary:   #94a3b8;
  --hover-bg:         rgba(255,255,255,0.07);
  --nav-bg:           rgba(5,6,16,0.88);
  --input-bg:         var(--card-bg);
  --oracle-cyan:      #00d1ff;
  --bullish-green:    #00ff88;
  --bearish-red:      #ff4d4d;
  --admin-purple:     #8b5cf6;
  --warning-amber:    #f59e0b;
  --mesh-cyan:        rgba(0,209,255,0.08);
  --mesh-green:       rgba(0,255,136,0.04);
  --btn-primary-bg:   linear-gradient(135deg, var(--oracle-cyan), var(--bullish-green));
  --btn-primary-text: #050610;
  /* Landing page extras — available to all pages */
  --violet:     #8b5cf6;
  --cyan:       #22d3ee;
  --lime:       #b8ff5c;
  --blue:       #60a5fa;
  --orange:     #ffb86b;
  --soft:       #d7dcff;
  --line:       var(--border);
  --card:       var(--card-bg);
  --muted:      var(--text-secondary);
  --radius-lg:  32px;
  --radius-md:  22px;
  --shadow:     0 24px 80px rgba(0,0,0,0.45);
}

/* ── Light mode overrides ────────────────────────────── */
[data-theme="light"] {
  --dark-bg:          #f4f6f9;
  --card-bg:          rgba(255,255,255,0.95);
  --card-strong:      rgba(255,255,255,1);
  --border:           rgba(0,0,0,0.08);
  --text-primary:     #0f172a;
  --text-secondary:   #475569;
  --hover-bg:         rgba(0,0,0,0.05);
  --nav-bg:           rgba(244,246,249,0.95);
  --input-bg:         rgba(255,255,255,0.9);
  --oracle-cyan:      #0088bb;
  --bullish-green:    #009955;
  --bearish-red:      #dc2626;
  --admin-purple:     #7c3aed;
  --warning-amber:    #d97706;
  --mesh-cyan:        rgba(0,136,187,0.04);
  --mesh-green:       rgba(0,153,85,0.03);
  --btn-primary-bg:   linear-gradient(135deg, #0088bb, #009955);
  --btn-primary-text: white;
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
a { color: inherit; text-decoration: none; }

/* ── Body — landing-page gradient background ─────────── */
body {
  font-family: 'Space Grotesk', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 15% -10%, rgba(139,92,246,0.32), transparent 34%),
    radial-gradient(circle at 82%   8%, rgba(34,211,238,0.18), transparent 30%),
    radial-gradient(circle at 50% 110%, rgba(96,165,250,0.12), transparent 42%),
    var(--dark-bg);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="light"] body {
  background: var(--dark-bg);
}

/* ── Subtle grid overlay (from landing page) ─────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent 65%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent 65%);
  z-index: -1;
}
[data-theme="light"] body::before { opacity: 0; }

/* ── Mesh radial glow (shared div used by all pages) ─── */
.mesh-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, var(--mesh-cyan) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, var(--mesh-green) 0%, transparent 40%);
  z-index: 0;
  pointer-events: none;
  transition: background 0.3s ease;
}
