@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Manrope:wght@200..800&display=swap');
@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --font-headline: "Newsreader", serif;
  --font-body: "Manrope", sans-serif;

  --color-surface: #0e0e0e;
  --color-surface-container: #191a1a;
  --color-surface-container-low: #131313;
  --color-surface-container-high: #1f2020;
  --color-surface-container-highest: #252626;
  --color-surface-bright: #2c2c2c;
  --color-surface-dim: #0e0e0e;
  --color-on-surface: #e7e5e4;
  --color-on-surface-variant: #acabaa;
  --color-primary: #c6c6c7;
  --color-primary-dim: #b8b9b9;
  --color-on-primary: #3f4041;
  --color-tertiary: #fbf9f8;
  --color-on-tertiary: #5f5f5f;
  --color-outline: #767575;
  --color-outline-variant: #484848;
}

@layer base {
  body {
    @apply bg-surface text-on-surface font-body selection:bg-primary/20;
  }
}

.glass {
  @apply bg-surface-container-highest/85 backdrop-blur-xl border border-outline-variant/10;
}

.subtle-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
  background-size: 40px 40px;
}

.hero-mesh {
  background-image: 
    radial-gradient(at 0% 0%, rgba(20, 20, 20, 1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, rgba(30, 30, 40, 0.3) 0, transparent 70%), 
    radial-gradient(at 100% 0%, rgba(15, 15, 25, 0.5) 0, transparent 50%);
  background-attachment: fixed;
}

.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}