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

@theme {
  --font-heading: "Montserrat", sans-serif;
  --font-body: "Open Sans", sans-serif;

  --color-brand-primary: #443bdf;
  --color-brand-accent: #5e58f8;
  --color-brand-light: #e3dcf3;
  --color-brand-dark: #191c20;
  
  --color-app-surface: #f9f9ff;
  --color-app-surface-variant: #ededf4;
  --color-app-surface-low: #f3f3f9;
  --color-text-primary: #191c20;
  --color-text-secondary: #464555;
  --color-app-border: #c7c4d8;
}

/* Custom CSS helper for clipping path like in WordPress */
.hero-clip-custom {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

@media (max-width: 768px) {
  .hero-clip-custom {
    clip-path: none;
  }
}