@import '@fontsource/outfit/400.css';
@import '@fontsource/outfit/600.css';
@import '@fontsource/outfit/700.css';
@import '@fontsource/outfit/900.css';
@import '@fontsource/fira-code/400.css';
@import '@fontsource/fira-code/500.css';
@import '@fontsource/space-grotesk/400.css';
@import '@fontsource/space-grotesk/500.css';
@import '@fontsource/space-grotesk/700.css';
@import '@fontsource/inter/400.css';
@import '@fontsource/inter/500.css';
@import '@fontsource/inter/600.css';
@import '@fontsource/inter/700.css';
@import 'tailwindcss';
@plugin '@tailwindcss/typography';
@source '../../components/src';
@import '../../components/src/colors.css';

@layer base {
  * {
    box-sizing: inherit;
  }

  html {
    font-family: 'Inter', system-ui, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.1rem;
    height: 100%;
    box-sizing: border-box;
  }

  body {
    margin: 0;
    height: 100%;
    min-height: 100vh;
    background: var(--color-page-bg);
    color: var(--color-text-brand);
    padding: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  a {
    color: var(--color-hister-indigo);
    text-decoration: none;
    cursor: pointer;
  }

  a:hover {
    text-decoration: underline;
  }

  img[src] {
    display: block;
  }

  img:not([src]) {
    display: none;
  }

  code {
    background-color: var(--color-muted-surface);
    padding: 0 0.2em;
    border-radius: 0;
  }

  kbd {
    background-color: var(--color-muted-surface);
    border: 1px solid var(--color-border-brand);
    border-radius: 0;
    padding: 0.3em 0.7em;
    margin: 0 0.2em;
    font-family: 'Fira Code', monospace;
    font-size: 0.85em;
    white-space: nowrap;
    box-shadow: 0 2px 0 var(--color-border-brand);
  }

  mark {
    font-weight: 600;
    background: transparent;
    color: inherit;
  }

  /* Preview panel: wrap wide tables so horizontal overflow scrolls,
     and contain floated infoboxes/thumbnails inside the prose block. */
  .prose table {
    overflow-x: auto;
    max-width: 100%;
  }

  .prose {
    display: flow-root;
  }
}
