@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  --sky-deep: #0A1628;
  --sky-mid: #0D2044;
  --sky-card: #112654;
  --sky-border: #1A3A6E;
  --azure: #1D6FEB;
  --azure-soft: #4A90F5;
  --azure-dim: #0E4DB0;
  --azure-glow: #60A5FA;
  --arctic: #E8F4FF;
  --arctic-dim: #A8C8F0;
  --arctic-bright: #FFFFFF;
  --profit: #00C875;
  --profit-dim: #009959;
  --loss: #F03E3E;
  --loss-dim: #B82C2C;
  --gold: #F5C842;
  --gold-dim: #B8942E;
  --platinum: #C8D8F0;
  --platinum-dim: #7A9ABF;
  --platinum-bright: #EEF5FF;
  --phi: 1.618;
}

/* ─── Base Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }

body {
  background: linear-gradient(160deg, #071020 0%, #0A1628 40%, #0D2044 100%);
  color: var(--platinum);
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ─── Subtle Grid Background ─────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(29, 111, 235, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 111, 235, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}

/* ─── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sky-deep); }
::-webkit-scrollbar-thumb { background: var(--azure-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--azure); }

/* ─── Selection ─────────────────────────────────────────────────────────────── */
::selection { background: rgba(29, 111, 235, 0.3); color: var(--arctic-bright); }

/* ─── Utility Classes ────────────────────────────────────────────────────────── */
@layer utilities {
  .glass {
    background: rgba(17, 38, 84, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(29, 111, 235, 0.15);
  }
  .glass-strong {
    background: rgba(17, 38, 84, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(29, 111, 235, 0.22);
  }

  .glow-text-azure {
    text-shadow: 0 0 20px rgba(29, 111, 235, 0.9), 0 0 40px rgba(29, 111, 235, 0.4);
  }
  .glow-text-gold {
    text-shadow: 0 0 20px rgba(245, 200, 66, 0.8), 0 0 40px rgba(245, 200, 66, 0.4);
  }
  .glow-text-profit {
    text-shadow: 0 0 16px rgba(0, 200, 117, 0.7);
  }
  .glow-text-loss {
    text-shadow: 0 0 16px rgba(240, 62, 62, 0.7);
  }

  .text-profit { color: var(--profit); }
  .text-loss { color: var(--loss); }
  .text-neutral { color: var(--platinum-dim); }

  .font-display { font-family: var(--font-syne), sans-serif; }
  .font-data { font-family: var(--font-jetbrains), monospace; }

  .gradient-text {
    background: linear-gradient(135deg, #60A5FA 0%, #FFFFFF 50%, #93C5FD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .gradient-text-azure {
    background: linear-gradient(135deg, var(--azure) 0%, var(--azure-soft) 61.8%, #93C5FD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .gradient-text-gold {
    background: linear-gradient(135deg, var(--gold) 0%, #FFD700 61.8%, var(--gold-dim) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Shimmer loading */
  .shimmer {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.0) 0%,
      rgba(29, 111, 235, 0.1) 50%,
      rgba(255,255,255,0.0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  /* Scan line */
  .scan-overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .scan-overlay::after {
    content: '';
    position: absolute;
    top: -2px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--azure), transparent);
    animation: scanLine 4s linear infinite;
    opacity: 0.5;
  }
  @keyframes scanLine {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
  }

  /* Node pulse */
  .node-blink { animation: nodeBlink 2s ease-in-out infinite; }
  @keyframes nodeBlink {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
  }
}