@import 'tailwindcss';

:root {
  /* ── Base palette ──────────────────────────────────────────── */
  --bg:         #080810;
  --surface:    #0f0f1c;
  --surface-2:  #17172a;
  --surface-3:  #1f1f36;
  --border:     rgba(255, 255, 255, 0.07);
  --border-sub: rgba(255, 255, 255, 0.04);

  /* ── Text ──────────────────────────────────────────────────── */
  --text:   #eeeeff;
  --text-2: #9898c0;
  --text-3: #55557a;

  /* ── Semantic ──────────────────────────────────────────────── */
  --green:    #4ade80;  --green-bg:  rgba(74,  222, 128, 0.08);
  --red:      #f87171;  --red-bg:    rgba(248, 113, 113, 0.08);
  --amber:    #fbbf24;  --amber-bg:  rgba(251, 191,  36, 0.08);
  --blue:     #60a5fa;  --blue-bg:   rgba(96,  165, 250, 0.08);
  --cyan:     #22d3ee;  --cyan-bg:   rgba(34,  211, 238, 0.08);

  /* ── App accent — mint teal ────────────────────────────────── */
  --accent:    #5eead4;
  --accent-bg: rgba(94, 234, 212, 0.08);

  /* ── Typography ────────────────────────────────────────────── */
  --font-ui:   'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Shape ─────────────────────────────────────────────────── */
  --radius:    12px;
  --radius-sm:  8px;
  --radius-lg: 16px;

  /* ── Legacy aliases (components that reference old tokens) ─── */
  --yellow:       var(--amber);
  --yellow-bg:    var(--amber-bg);
  --purple:       #c084fc;
  --purple-bg:    rgba(192, 132, 252, 0.08);
  --bg-card:      var(--surface);
  --bg-hover:     var(--surface-2);
  --border-subtle:var(--border-sub);
  --text-sec:     var(--text-2);
  --text-muted:   var(--text-3);
  --font-serif:   var(--font-ui);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

::selection { background: var(--accent-bg); color: var(--accent); }

*:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideRight {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes spin { to { transform: rotate(360deg); } }