/*
 * starlight theme mapped onto the web app's tokens, which switch with the
 * theme themselves, so one mapping serves light and dark. the light selector
 * matches starlight-tailwind's, which would otherwise win on specificity
 */
:root,
:root[data-theme="light"] {
  --sl-font: var(--font-sans);
  --sl-font-mono: var(--font-mono);

  /* the top bar and sidebar sit directly on the page background */
  --sl-color-bg-nav: var(--sl-color-black);
  --sl-color-bg-sidebar: var(--sl-color-black);

  --sl-color-white: var(--color-foreground-default);
  --sl-color-gray-1: var(--color-foreground-default);
  --sl-color-gray-2: var(--color-foreground-muted);
  --sl-color-gray-3: var(--color-foreground-subtle);
  --sl-color-gray-4: var(--color-border-strong);
  --sl-color-gray-5: var(--color-border-default);
  --sl-color-gray-6: var(--color-background-inset);
  --sl-color-gray-7: var(--color-background-subtle);
  /* the page background, like the app shell: white in light mode */
  --sl-color-black: var(--color-background-default);

  /* monochrome accents, like the web app's links */
  --sl-color-accent-low: var(--color-background-inset);
  --sl-color-accent: var(--color-foreground-muted);
  --sl-color-accent-high: var(--color-foreground-default);

  /* the web app's type scale for what markup.css doesn't cover: the page
     title, table of contents, and other starlight furniture */
  --sl-text-body: 0.9375rem; /* paragraph-body */
  --sl-line-height: 1.6; /* 24px on the 15px body */
  --sl-text-body-sm: 0.8125rem; /* paragraph-regular */
  --sl-text-sm: 0.8125rem;
  --sl-text-h1: 1.875rem; /* heading-2, the app's page titles */
}

/* in dark mode the page falls back to the canvas shade, like the app shell */
:root[data-theme="dark"] {
  --sl-color-black: var(--color-background-canvas);
}

/* landing page */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 48rem) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* the cards are links, but shouldn't take the prose link's indigo hover color
   (the icon inherits currentColor from the anchor) */
.feature-grid > a,
.feature-grid > a:hover {
  color: var(--color-foreground-default);
}

/* ButtonCard is sized for app chrome (12px). on the landing page the cards
   are content, so step them up like the welcome tiles in web: title one
   step above the description, the description one step below the body */
.feature-grid > a {
  padding: var(--spacing-md);
}

.feature-grid > a > div {
  gap: 0.25rem;
}

.feature-grid > a .font-medium {
  font-size: 0.9375rem; /* typography-paragraph-body */
  line-height: 1.5rem;
}

.feature-grid > a span:not(.font-medium) {
  font-size: 0.8125rem; /* typography-paragraph-regular */
  line-height: 1.25rem;
}

.feature-grid > a svg {
  width: 1rem;
  height: 1rem;
}

/*
 * pages without a table of contents drop `data-has-toc`, and starlight then
 * lets the main pane fill the full width and centers its content, so prose
 * jumps sideways between pages. size and align it as if the right column were
 * still there, leaving the space reserved, so nothing shifts
 */
@media (min-width: 72rem) {
  [data-has-sidebar]:not([data-has-toc]) .main-pane {
    --sl-content-margin-inline: auto 0;
    order: 1;
    width: calc(
      var(--sl-content-width) +
        (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
    );
  }
}

/* hero tweaks for the landing page */
[data-has-hero] .hero {
  padding-block: 0 3rem;
}

[data-has-hero] .hero h2 {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  letter-spacing: -0.02em;
}