@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');

@tailwind base;
@tailwind components;

// Additional styles
@import 'additional-styles/utility-patterns.scss';
@import 'additional-styles/range-slider.scss';
@import 'additional-styles/toggle-switch.scss';
@import 'additional-styles/theme.scss';

@tailwind utilities;

// See Alpine.js: https://github.com/alpinejs/alpine#x-cloak
[x-cloak=""] {
    display: none;
}

@media screen and (max-width: theme('screens.lg')) {
    [x-cloak="lg"] { display: none; }
}

:root {
  --color-primary-50: #fff1f2;
  --color-primary-100: #ffe4e6;
  --color-primary-200: #fecdd3;
  --color-primary-300: #fda4af;
  --color-primary-400: #fb7185;
  --color-primary-500: #f43f5e;
  --color-primary-600: #e11d48;
  --color-primary-700: #be123c;
  --color-primary-800: #9f1239;
  --color-primary-900: #881337;
  --color-accent: #1e293b;
  --color-light: #e2e8f0;
  --color-light-hover: #cbd5e1;
  --color-input: #1e293b;
  --color-bg-input: #ffffff;

  font-size: 16px;
  font-family: 'Inter', sans-serif;
  color: #475569;
  background-color: #ffffff;
}
