@import 'tailwindcss';

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

@source '../node_modules/flowbite-svelte/dist';
@source '../node_modules/flowbite-svelte-icons/dist';

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

  --color-primary-50: #ecfeff;
  --color-primary-100: #cffafe;
  --color-primary-200: #a5f3fc;
  --color-primary-300: #67e8f9;
  --color-primary-400: #22d3ee;
  --color-primary-500: #06b6d4;
  --color-primary-600: #0891b2;
  --color-primary-700: #0e7490;
  --color-primary-800: #155e75;
  --color-primary-900: #164e63;
}

@layer base {
  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;
  }
}

@layer components {
  /* overwrite runeswebkit.css using !important */
  .dark_bg_theme {
    @apply dark:bg-stone-900;
  }
}
