@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

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

@layer base {
  :root {
    --background: 0 0% 99%;
    --foreground: 0 0% 8%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 8%;
    --primary: 0 0% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 94%;
    --secondary-foreground: 0 0% 16%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 40%;
    --border: 0 0% 86%;
    --input: 0 0% 86%;
    --ring: 0 0% 25%;
  }

  .dark {
    --background: 0 0% 6%;
    --foreground: 0 0% 95%;
    --card: 0 0% 9%;
    --card-foreground: 0 0% 95%;
    --primary: 0 0% 96%;
    --primary-foreground: 0 0% 8%;
    --secondary: 0 0% 16%;
    --secondary-foreground: 0 0% 96%;
    --muted: 0 0% 14%;
    --muted-foreground: 0 0% 70%;
    --border: 0 0% 22%;
    --input: 0 0% 22%;
    --ring: 0 0% 70%;
  }

  * {
    @apply border-border;
  }

  html,
  body,
  #root {
    @apply min-h-screen;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(0, 0, 0, 0.06) 0, transparent 24%),
      radial-gradient(circle at 84% 0%, rgba(0, 0, 0, 0.07) 0, transparent 28%),
      linear-gradient(140deg, rgba(255, 255, 255, 0.85), rgba(245, 245, 245, 0.5));
    background-attachment: fixed;
  }

  .dark body {
    background-image:
      radial-gradient(circle at 10% 14%, rgba(255, 255, 255, 0.08) 0, transparent 24%),
      radial-gradient(circle at 85% 0%, rgba(255, 255, 255, 0.06) 0, transparent 24%),
      linear-gradient(145deg, rgba(11, 11, 11, 0.95), rgba(18, 18, 18, 0.86));
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
    }
  }
}

@layer components {
  .panel-grid {
    @apply grid gap-6 lg:grid-cols-[2fr_1fr];
  }

  .interactive-row {
    @apply transition-colors duration-200 motion-reduce:transition-none hover:bg-muted/45;
  }
}