@import 'tailwindcss';
@import 'tw-animate-css';

@font-face {
  font-family: InterVariable;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/InterVariable.woff2') format('woff2');
}

@theme {
  --font-sans: InterVariable, sans-serif;

  --color-*: initial;
  --color-black: #000;
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;
  --color-white: #fff;

  --color-background: var(--color-white);
  --color-foreground: #191f2f;

  --color-light: #f7f9fb;
  --color-light-accent: #e9ebed;
  --color-light-foreground: var(--color-foreground);

  --color-dark: #1e2337;
  --color-dark-accent: #404455;
  --color-dark-foreground: var(--color-white);

  --color-secondary: var(--color-gray-600);
  --color-secondary-accent: #5c636a;
  --color-secondary-foreground: var(--color-white);

  --color-primary: #0098ea;
  --color-primary-accent: #0081c7;
  --color-primary-foreground: var(--color-white);
  --color-primary-emphasis: #005b8c;

  --color-info: #0dcaf0;
  --color-info-accent: #31d2f2;
  --color-info-foreground: var(--color-foreground);

  --color-warning: #ffc107;
  --color-warning-accent: #ffca2c;
  --color-warning-foreground: var(--color-foreground);

  --color-danger: #e34b3b;
  --color-danger-accent: #c14032;
  --color-danger-foreground: var(--color-white);

  --color-success: #00a84e;
  --color-success-accent: #008f42;
  --color-success-foreground: var(--color-white);
  --color-success-emphasis: #005c2b;

  --color-muted: color-mix(in oklab, var(--color-foreground) 75%, transparent);
  --color-outline: var(--color-gray-300);
  --color-focus: color-mix(in oklab, var(--color-primary) 25%, transparent);
  --color-outline-focus: #80ccf5;

  --breakpoint-*: initial;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  --container-*: initial;
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-2xl: 1320px;

  --text-*: initial;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.625 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.75rem;
  --text-3xl--line-height: calc(2.25 / 1.75);
  --text-4xl: 2rem;
  --text-4xl--line-height: calc(2.5 / 2);
  --text-5xl: 2.5rem;
  --text-5xl--line-height: calc(3 / 2.5);
  --text-6xl: 3rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4rem;
  --text-7xl--line-height: 1;
  --text-8xl: 5rem;
  --text-8xl--line-height: 1;
  --text-9xl: 6rem;
  --text-9xl--line-height: 1;
}

@utility scrollbar-thin {
  scrollbar-width: thin;
}
