@import 'tailwindcss';

@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@theme {
  --color-primary: #00edc2;
  --color-primary-foreground: #000000;
  --color-secondary: #93afaf;
  --color-secondary-foreground: #ffffff;
  --color-background: #f4f6f8;
  --color-foreground: #171717;

  --font-sans: var(--font-roboto), ui-sans-serif, system-ui;
}

:root {
  --font-roboto: 'Roboto', sans-serif;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
}