@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --primary: #5C7AEA;
    --secondary: #F2A7B5;
    --accent: #06b6d4;
    --dark: #1B2430;
    --light: #f8fafc;
  }
}

@layer utilities {
  .gradient-lovisa {
    background: linear-gradient(135deg, #5C7AEA 0%, #F2A7B5 100%);
  }

  .gradient-service {
    background: linear-gradient(135deg, #5C7AEA 0%, #06b6d4 100%);
  }

  .hero-pattern {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a"><stop offset="0" stop-color="%23ffffff" stop-opacity="0.22"/><stop offset="1" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="230" fill="url(%23a)"/><circle cx="800" cy="800" r="260" fill="url(%23a)"/><circle cx="900" cy="300" r="260" fill="url(%23a)"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .btn-gradient {
    background: linear-gradient(135deg, #5C7AEA 0%, #F2A7B5 100%);
  }

  .btn-gradient:hover {
    background: linear-gradient(135deg, #F2A7B5 0%, #5C7AEA 100%);
  }
}