@layer base, starlight, theme, components, utilities;
@import '@astrojs/starlight-tailwind';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);
@import 'temml/dist/Temml-Local.css';

@theme {
  --color-accent-200: #ba2619;
  --color-accent-600: #ba2619;
  --color-accent-900: #fff;
  --color-accent-950: #fff;
  --color-gray-100: #f5f6f8;
  --color-gray-200: #eceef2;
  --color-gray-300: #c0c2c7;
  --color-gray-400: #888b96;
  --color-gray-500: #545861;
  --color-gray-700: #353841;
  --color-gray-800: #24272f;
  --color-gray-900: #17181c;
}

body {
  hyphens: auto;
}

code {
  white-space: pre;
}

/* No rounded borders */
* {
  border-radius: 0 !important;
}

/* Primary Action white text */
.actions > .primary {
  color: #fff;
}

/* Lighter red hrefs */
[data-theme='dark'] .sl-markdown-content a:not(:where(.not-content *)) {
  color: #ec7f75;
}
[data-theme='dark'] .right-sidebar-panel a:where(a)[aria-current='true'] {
  color: #ec7f75;
}

.sl-markdown-content kbd {
  @apply inline-block px-1 bg-gray-100 text-gray-800 border border-gray-300 shadow-sm;
}
[data-theme='dark'] .sl-markdown-content kbd {
  @apply bg-gray-800 text-gray-100 border-gray-600;
}

/* Remove layer margin from starlight in math mode */
math * {
  margin-top: 0px;
}
