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

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Outfit", sans-serif;
  
  --color-bg-primary: #191E07;
  --color-bg-secondary: #272F0A;
  --color-bg-variant: #3E481B;
  
  --color-accent-primary: #FFFE77;
  --color-accent-secondary: #D4FF5E;
  
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #BEC056;
  --color-text-muted: #B4BC9A;
  
  --color-border-subtle: #343A20;
  
  /* Map brand colors for existing components */
  --color-brand: var(--color-accent-secondary);
  --color-brand-light: var(--color-accent-primary);
  --color-brand-dark: #86efac; /* Fallback or specific shade */
}

@layer base {
  body {
    @apply bg-bg-primary text-text-primary font-sans antialiased;
  }
}

@utility glass {
  @apply bg-white/5 backdrop-blur-xl border border-border-subtle;
}

@utility bento-card {
  @apply bg-bg-secondary border border-border-subtle rounded-3xl p-8 transition-all duration-300;
}
