@import "tailwindcss";

/* Product tokens — same palette as the app (apps/frontend/src/index.css). */
@theme {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-surface-hover: #161616;
  --color-line: rgba(255, 255, 255, 0.08);
  --color-line-strong: rgba(255, 255, 255, 0.14);
  --color-text: #fafafa;
  --color-dim: #a1a1aa;
  --color-faint: #52525b;
  --color-accent: #3b82f6;
  --color-up: #22c55e;
  --color-down: #f59e0b;
  --color-destructive: #ef4444;
  --color-iconbg: #1c1c1e;

  --ease-snap: cubic-bezier(0.2, 0, 0, 1);

  --font-sans: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;

  --animate-pulse-dot: pulse-dot 2.4s ease-in-out infinite;
  --animate-float: float 7s ease-in-out infinite;
  --animate-scan: scan 5s linear infinite;
  --animate-draw: draw 2.2s var(--ease-snap) forwards;

  @keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
    50% { opacity: 0.75; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  @keyframes scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
  }
  @keyframes draw {
    to { stroke-dashoffset: 0; }
  }
}

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100dvh;
}

::selection {
  background: rgba(59, 130, 246, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}