@tailwind base;
@tailwind components;
@tailwind utilities;
@import "font.css";

@layer utilities {
  .backdrop-blur-custom {
    backdrop-filter: blur(8.7px);
  }

  .scale-x-flip {
    @apply transform scale-x-[-1];
  }

  .shadow-custom {
    box-shadow: 14px 18px 29.9px 0px rgba(0, 0, 0, 0.06);
  }
}

:root {
  --background: #ffffff;
  --foreground: #171717;
  --black: rgba(55, 55, 55, 1);
  --white: rgba(255, 255, 255, 1);
  --dark-white: rgba(251 251 252);
  --blue: rgba(135, 191, 255, 1);
  --grey: rgba(132, 132, 132, 1);
  --dark: rgba(51, 51, 51, 1);
  --dark-blue: rgba(95, 161, 236, 1);
  --dark-grey: rgba(243, 243, 243, 1);
  --light-black: rgba(109, 109, 109, 1);
  --light-grey: rgba(114, 114, 114, 1);
  --middle-grey: rgba(141, 141, 141, 1);
  --bg-grey: rgba(218, 218, 218, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: linear-gradient(180deg, #F3F3F3 0%, #F9F9F9 100%);
  font-family: 'GT Eesti Pro Display', Arial, Helvetica, sans-serif;
  font-weight: 300;
}