@import 'tailwindcss';

@plugin '@tailwindcss/typography';

@theme {
  --font-*: initial;
  --font-sans: DejaVu, sans-serif;
  --font-serif: DejaVu, serif;
  --font-mono: DejaVu, monospace;

  --color-text-50: hsl(200, 60%, 95%);
  --color-text-100: hsl(199, 61%, 90%);
  --color-text-200: hsl(200, 61%, 80%);
  --color-text-300: hsl(200, 59%, 70%);
  --color-text-400: hsl(200, 60%, 60%);
  --color-text-500: hsl(200, 60%, 50%);
  --color-text-600: hsl(200, 60%, 40%);
  --color-text-700: hsl(200, 59%, 30%);
  --color-text-800: hsl(200, 61%, 20%);
  --color-text-900: hsl(199, 61%, 10%);
  --color-text-950: hsl(200, 60%, 5%);
  --color-text-orig: hsl(200, 60%, 1%);

  --color-background-50: hsl(195, 62%, 95%);
  --color-background-100: hsl(196, 65%, 90%);
  --color-background-200: hsl(197, 65%, 80%);
  --color-background-300: hsl(197, 63%, 70%);
  --color-background-400: hsl(197, 64%, 60%);
  --color-background-500: hsl(197, 64%, 50%);
  --color-background-600: hsl(197, 64%, 40%);
  --color-background-700: hsl(197, 63%, 30%);
  --color-background-800: hsl(197, 65%, 20%);
  --color-background-900: hsl(196, 65%, 10%);
  --color-background-950: hsl(199, 62%, 5%);
  --color-background-orig: hsl(197, 64%, 98%);

  --color-primary-50: hsl(198, 38%, 95%);
  --color-primary-100: hsl(200, 41%, 90%);
  --color-primary-200: hsl(201, 41%, 80%);
  --color-primary-300: hsl(201, 41%, 70%);
  --color-primary-400: hsl(201, 41%, 60%);
  --color-primary-500: hsl(201, 41%, 50%);
  --color-primary-600: hsl(201, 41%, 40%);
  --color-primary-700: hsl(201, 41%, 30%);
  --color-primary-800: hsl(201, 41%, 20%);
  --color-primary-900: hsl(200, 41%, 10%);
  --color-primary-950: hsl(204, 38%, 5%);
  --color-primary-orig: hsl(201, 41%, 69%);

  --color-secondary-50: hsl(201, 68%, 95%);
  --color-secondary-100: hsl(201, 69%, 90%);
  --color-secondary-200: hsl(200, 67%, 80%);
  --color-secondary-300: hsl(200, 67%, 70%);
  --color-secondary-400: hsl(200, 67%, 60%);
  --color-secondary-500: hsl(200, 67%, 50%);
  --color-secondary-600: hsl(200, 67%, 40%);
  --color-secondary-700: hsl(200, 67%, 30%);
  --color-secondary-800: hsl(200, 67%, 20%);
  --color-secondary-900: hsl(201, 69%, 10%);
  --color-secondary-950: hsl(198, 68%, 5%);
  --color-secondary-orig: hsl(200, 67%, 87%);

  --color-accent-50: hsl(204, 20%, 95%);
  --color-accent-100: hsl(200, 18%, 90%);
  --color-accent-200: hsl(201, 20%, 80%);
  --color-accent-300: hsl(201, 19%, 70%);
  --color-accent-400: hsl(201, 19%, 60%);
  --color-accent-500: hsl(201, 19%, 50%);
  --color-accent-600: hsl(201, 19%, 40%);
  --color-accent-700: hsl(201, 19%, 30%);
  --color-accent-800: hsl(201, 20%, 20%);
  --color-accent-900: hsl(200, 18%, 10%);
  --color-accent-950: hsl(204, 20%, 5%);
  --color-accent-orig: hsl(201, 19%, 40%);
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}