@import "tailwindcss";

:root {
  --color-green: #0a3d2c;
  --color-green-light: #145a3d;
  --color-red: #b91c1c;
  --color-red-bright: #dc2626;
  --color-cream: #f8f6f1;
  --color-dark: #0c0f0e;
  --background: var(--color-dark);
  --foreground: #f4f4f5;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-dm-sans), system-ui, sans-serif;
  --font-display: var(--font-bebas), system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-dark);
  color: var(--foreground);
  font-family: var(--font-dm-sans), system-ui, sans-serif;
}

.font-display {
  font-family: var(--font-bebas), system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.text-gradient {
  background: linear-gradient(135deg, #4ade80 0%, #fff 50%, #f87171 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-padding {
  @apply px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto py-16 md:py-24;
}

.btn-primary {
  @apply inline-flex items-center justify-center gap-2 rounded-sm bg-[#b91c1c] px-6 py-3.5 text-sm font-semibold uppercase tracking-wider text-white transition hover:bg-[#dc2626] focus:outline-none focus:ring-2 focus:ring-red-500/50;
}

.btn-secondary {
  @apply inline-flex items-center justify-center gap-2 rounded-sm border-2 border-white/30 bg-white/5 px-6 py-3.5 text-sm font-semibold uppercase tracking-wider text-white backdrop-blur-sm transition hover:border-white/60 hover:bg-white/10;
}

.btn-green {
  @apply inline-flex items-center justify-center gap-2 rounded-sm bg-[#145a3d] px-6 py-3.5 text-sm font-semibold uppercase tracking-wider text-white transition hover:bg-[#1a7049];
}