src/index.css

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

@theme {
  --color-surface: #0a0a0a;
  --color-surface-dim: #050505;
  --color-surface-bright: #1a1a1a;
  --color-surface-container-lowest: #020202;
  --color-surface-container-low: #0f0f0f;
  --color-surface-container: #141414;
  --color-surface-container-high: #1e1e1e;
  --color-surface-container-highest: #282828;
  --color-on-surface: #f2f2f2;
  --color-on-surface-variant: #a3a3a3;
  --color-outline: #404040;
  --color-outline-variant: #262626;
  --color-primary: #ffffff;
  --color-on-primary: #000000;
  
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --spacing-container-max: 1200px;
  --spacing-section: 120px;
}

@layer base {
  body {
    @apply bg-surface text-on-surface font-sans antialiased selection:bg-primary/20 selection:text-primary;
    background-image: radial-gradient(circle at 50% -20%, #1e1e1e 0%, transparent 50%);
  }
}

.grid-background {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

@media (hover: hover) and (pointer: fine) {
  .noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.02;
    background-image: url('https://www.transparenttextures.com/patterns/noise.png');
  }
}

.bento-card {
  @apply bg-surface-container-low/40 border border-outline-variant transition-all duration-500 backdrop-blur-sm;
}

.bento-card:hover {
  @apply border-outline/50 bg-surface-container-low/60 shadow-2xl;
}