@import "tailwindcss";

:root {
  --background: #fafaf9;
  --foreground: #1c1917;
  --accent: #4f7942;
  --accent-light: #6b9f5b;
  --muted: #78716c;
  --border: #e7e5e4;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-accent: var(--accent);
  --color-accent-light: var(--accent-light);
  --color-muted: var(--muted);
  --color-border: var(--border);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0c0a09;
    --foreground: #e7e5e4;
    --accent: #6b9f5b;
    --accent-light: #4f7942;
    --muted: #a8a29e;
    --border: #292524;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
}

/* Hero section */
.hero-section {
  background: linear-gradient(
    145deg,
    #1a2e1a 0%,
    #2d4a2d 25%,
    #1c3a2a 50%,
    #1a2835 75%,
    #0f1f2e 100%
  );
}

.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(107, 159, 91, 0.2) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(79, 121, 66, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 60%, rgba(30, 80, 100, 0.1) 0%, transparent 60%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
}