@import "tailwindcss";

/* Explicit source roots for Tailwind v4. Auto-detection misses files when
   Turbopack's workspace root is ambiguous (e.g. shell cwd differs from the
   web project root), so we pin the scan paths here. */
@source "../components/**/*.{ts,tsx}";
@source "../app/**/*.{ts,tsx}";

:root {
  --surface-0: #09090b;
  --surface-1: #111114;
  --surface-2: #1a1a1f;
  --surface-3: #232328;
  --brand: #3b82f6;
  --brand-dim: #2563eb;
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --text-code: #e879f9;
  --code-bg: #18181b;
  --code-border: #27272a;
}

/* Note: no `* { margin: 0; padding: 0; box-sizing: border-box; }` here.
   Tailwind v4's Preflight (included by `@import "tailwindcss"`) already
   resets margins on block elements and sets border-box globally. An
   unlayered `*` selector would beat Tailwind's `@layer utilities` and
   silently break every margin utility (mb-*, mt-*, mx-*, etc.). */

html {
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-primary);
  background-color: var(--surface-0);
  overflow-x: hidden;
}

/* Default link color. Wrapped in @layer base so Tailwind utilities
   (text-white, text-zinc-*, etc.) in @layer utilities still win. An
   unlayered `a { color: ... }` would silently override utilities. */
@layer base {
  a {
    color: var(--brand);
    text-decoration: none;
    transition: color 150ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  a:hover {
    color: var(--text-primary);
  }
}

code {
  font-family: var(--font-mono), 'SFMono-Regular', Consolas, monospace;
  font-size: 0.875em;
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
  padding: 0.15em 0.4em;
  border-radius: 6px;
  color: var(--text-code);
}

/* Particle canvas */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}