@import "tailwindcss";
@import "./components/layout/Header/mobile-menu.css";
@import "./components/layout/Header/header-responsive.css";
@theme {
  --color-brand-blue: #1b254b;
  
  --color-brand-light: #f8fbff;

  --color-ui-muted: #6b7280;
  --color-ui-border: #e5e7eb;
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  --shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);

  --shadow-soft: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
}

@layer components {
  .bento-item {
    @apply border border-[--color-ui-border] bg-white;
  }
}