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

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

:root {
  /* Colors */
  --color-primary: #de1709;
  --color-secondary: #ffaf09;
  --color-success: #2aaf2e;
  --color-purple: #61167f;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-darkest: #232323;
  --color-gray-dark: #292d32;
  --color-gray-medium: #7f7f7f;
  --color-gray-light: #c4c4c4;
  --color-gray-lighter: #e7e7e7;
  --color-gray-lightest: #f5f5f5;
  --color-sale-light: #ffecea;
  --color-yellow-light: #fdff9f;

  /* Fonts */
  --font-main: 'Outfit', sans-serif;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-gray-lightest);
  color: var(--color-black);
}

.line-through-gray {
  text-decoration-color: var(--color-gray-light, #c4c4c4);
}

.trust-bar {
  background-color: var(--color-success);
}

.trust-bar-reminder {
  background-color: #e5f6e6;
  color: var(--color-success);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}