@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

@source '../node_modules/flowbite-svelte/dist';
@source '../node_modules/runes-webkit/dist';

@theme {
  --z-index-100: 100;

  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;
}

html {
  -webkit-text-size-adjust: 100%;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
  line-height: 1.5;
  -moz-tab-size: 4;
  tab-size: 4;
}

h1,
h2,
h3,
p,
ul,
li,
table {
  @apply tracking-wide dark:text-white;
}

h1 {
  @apply text-primary-800 dark:text-primary-400 my-8 text-3xl;
}

h2 {
  @apply my-6 text-2xl;
}

h3 {
  @apply my-5 text-xl;
}

p {
  @apply my-3 text-lg;
}

code {
  @apply text-primary-700 dark:text-primary-400;
}

#mainContent > pre {
  @apply mx-auto my-4 w-full overflow-auto rounded-xl border border-gray-200 bg-gray-50 bg-gradient-to-r p-2 text-sm text-gray-600 sm:p-6 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400;
}

.dark-bg-theme {
  @apply dark:bg-slate-900;
}

.dark-bg-theme2 {
  @apply dark:bg-slate-800;
}
