/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

@import 'tailwindcss';

@plugin 'tailwind-scrollbar' {
  nocompatible: true;
  preferredStrategy: "pseudoelements";
}

@variant dark (&:is([data-theme="dark"] *));

@theme {
  --color-custom: #10b981;
  --color-custom-light: #d1fae5;
}

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #0e7490;
  --ifm-color-primary-dark: #155e75;
  --ifm-color-primary-darker: #164e63;
  --ifm-color-primary-darkest: #083344;
  --ifm-color-primary-light: #0284c7;
  --ifm-color-primary-lighter: #0ea5e9;
  --ifm-color-primary-lightest: #38bdf8;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --ifm-color-white: #f8fafc;
  --ifm-color-black: #020617;
  --ifm-color-gray-100: #f1f5f9;
  --ifm-color-gray-200: #e2e8f0;
  --ifm-color-gray-300: #cbd5e1;
  --ifm-color-gray-400: #94a3b8;
  --ifm-color-gray-500: #64748b;
  --ifm-color-gray-600: #475569;
  --ifm-color-gray-700: #334155;
  --ifm-color-gray-800: #1e293b;
  --ifm-color-gray-900: #0f172a;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #0ea5e9;
  --ifm-color-primary-dark: #0284c7;
  --ifm-color-primary-darker: #0369a1;
  --ifm-color-primary-darkest: #075985;
  --ifm-color-primary-light: #38bdf8;
  --ifm-color-primary-lighter: #7dd3fc;
  --ifm-color-primary-lightest: #bae6fd;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

ol {
  list-style: decimal;
}
