@layer base, starlight, theme, components, utilities;

@import '@astrojs/starlight-tailwind';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

@theme {
  --color-gray-50: var(--color-zinc-50);
  --color-gray-100: var(--color-zinc-100);
  --color-gray-200: var(--color-zinc-200);
  --color-gray-300: var(--color-zinc-300);
  --color-gray-400: var(--color-zinc-400);
  --color-gray-500: var(--color-zinc-500);
  --color-gray-600: var(--color-zinc-600);
  --color-gray-700: var(--color-zinc-700);
  --color-gray-800: var(--color-zinc-800);
  --color-gray-900: var(--color-zinc-900);
  --color-gray-950: var(--color-zinc-950);

  --color-accent-200: '#34d399';
  --color-accent-600: '#10b981';
  --color-accent-900: '#065f46';
  --color-accent-950: '#064e3b';
}

* {
  @apply box-border;
}

:root {
  --sl-text-h3: var(--sl-text-2xl);
  --sl-text-h4: var(--sl-text-xl);
  @apply antialiased;
}

@screen 2xl {
  :root {
    --sl-content-width: 50rem;
  }
}

tr > td:first-child {
  white-space: nowrap;
}

iframe {
  width: 100%;
  min-height: 500px;
  border: none;
}

.main-frame,
.sidebar-pane {
  scrollbar-width: thin;
  overflow-y: auto;
  overflow-y: overlay;
  scrollbar-color: rgb(63 63 70) transparent;
}

.site-title {
  img {
    height: calc(var(--sl-nav-height) - 38px);
  }
}

.heading-grad {
  @apply bg-gradient-to-b from-zinc-200 to-zinc-400 bg-clip-text text-transparent;
}
