@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 — soft violet ──────────────────────────────── */
  --accent:    #a78bfa;
  --accent-bg: rgba(167, 139, 250, 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) ─── */
  --success:       var(--green);
  --success-dim:   var(--green-bg);
  --danger:        var(--red);
  --danger-dim:    var(--red-bg);
  --warn:          var(--amber);
  --warn-dim:      var(--amber-bg);
  --info:          var(--blue);
  --info-dim:      var(--blue-bg);
  --cyan-dim:      var(--cyan-bg);
  --accent-glow:   rgba(167, 139, 250, 0.10);
  --font-body:     var(--font-ui);
  --font-display:  var(--font-ui);
  --text-primary:  var(--text);
  --text-secondary:var(--text-2);
  --text-muted:    var(--text-3);
  --bg-base:       var(--bg);
  --bg-surface:    var(--surface);
  --bg-elevated:   var(--surface-2);
  --bg-muted:      var(--surface-3);
  --border-subtle: var(--border-sub);
}

*, *::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; height: 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); }

#app, [data-sveltekit-preload-data] > div { position: relative; z-index: 1; }

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

/* Animations */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideOutRight {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes toastIn {
  from { transform: translateX(calc(100% + 24px)); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(calc(100% + 24px)); opacity: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }