/**
 * root Design System - documentation styles: the home page
 *
 * Linked by `scripts/_docs-shell.mjs` on the home page and nowhere else. It used to sit in
 * `index.css`, which every one of the seventy-one pages downloads, so 70 of them were
 * carrying it for nothing (ADR-047). Same constraints as the rest of the shell: zero CSS
 * classes - element, `[data-part]` and attribute selectors only - zero inline styles, and
 * every value a root foundation token.
 */

/* ── Home page ──────────────────────────────────────────────────────────── */
/* No block-start padding. The home page's title used to open 24px lower than every other
   page's, and it took its size from a rule it shared with the sidebar's wordmark - so the
   one title on the site that is not aligned with the others was the first one a reader
   sees. */
[data-part="hero"] {
  padding-block-end: var(--root-s--md);

  /* The lockup: the mark and the word at the same *visible* height, which is not the same
     `height`. "root" has no descender, so its ink is 0.668 of the type size - measured with
     the page's own font through canvas `TextMetrics`, not guessed - and a mark set to `1em`
     would tower over it by half again.
     The size is on the `<span>` as well as on the `<h1>`: the foundations re-declare
     `--root-t--font-size` on every descendant of `body`, so a container's font-size reaches
     nothing, and the mark's `em` would resolve against 1.6rem instead of the title. */
  h1 {
    /* Above the scale, and named rather than pretended: the foundations' type ratio is
       1.125, so ten steps up from 16px is 52 - half of what this lockup is. A display size
       is a thing the token set does not have, and inventing a `var()` that reads like a step
       would be worse than one honest constant. It is the only length in this file that is
       neither a token nor a fraction of one. */
    --docs-hero-type: 10rem;
    --docs-hero-ink: 0.668;

    display: flex;
    gap: var(--root-s--lg);
    align-items: center;
    font-size: var(--docs-hero-type);
    line-height: var(--root-t--line-height--base);
    letter-spacing: -0.03em;

    span {
      font-size: var(--docs-hero-type);
      /* The reset re-declares the line-height too, which made a 10rem row 14rem tall. */
      line-height: var(--root-t--line-height--base);
    }

    svg {
      display: block;
      width: auto;
      height: calc(var(--docs-hero-type) * var(--docs-hero-ink));
    }
  }

  p {
    max-width: 62rem;
    font-size: var(--root-t--font-size--lg);
    color: var(--docs-muted);
  }
}

/* The one line that says what this is for. Bigger than the prose under it and in the
   page's own ink, because a reader deciding whether to keep reading reads exactly this. */
[data-part="pitch"] {
  margin-block: var(--root-s--md) var(--root-s--2xs);
  font-size: var(--root-t--font-size--4xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--docs-text);
}

/* A link, not a button, and that is a gap rather than a choice: `root-button` extends
   `<button>`, so nothing in the system can be an anchor that looks like one, and painting
   one here would mean reimplementing Button's variants and palettes. So it is a strong
   link with the arrow that says it goes somewhere. */
[data-part="cta"] {
  text-decoration: none;

  display: inline-flex;
  gap: var(--root-s--2xs);
  align-items: center;
  margin-block-start: var(--root-s--xl);
  font-size: var(--root-t--font-size--lg);
  font-weight: 600;
  color: light-dark(var(--root-c--default-400--light), var(--root-c--default-300--dark));

  /* The arrow is drawn, not marked up: `root-icon` is not flagged Ready for Dev, and the
     shell already draws its glyphs this way - the scheme switch and the heading anchor both
     do. The foundations own the font either way. */
  &::after {
    /* biome-ignore lint/a11y/useGenericFontNames: declared by the foundations' font-face */
    font-family: "root-icons";
    content: "\e916"; /* arrow-right */
    font-size: var(--root-t--font-size--sm);
    transition: translate var(--root-m--duration-fast) var(--root-m--ease-standard);
  }

  &:hover::after {
    translate: 0.4rem 0;
  }
}

/* The home page's bento is the shared one (`_status-strips.css`), which every group of
   cards on the site now uses: the grid, the `dense` packing, the card remap and the
   `[data-span="wide"]` span all live there. One thing is this page's own - the figure's
   size, because this is the only place a figure card is the page's main content rather
   than a footnote beside prose.

   The four hand-picked `:nth-child()` spans that used to be here are gone with it: a
   position says nothing about which card it is, and meant a different card the moment
   one was added above it. Width follows the note's own length now. */
[data-part="bento"] [data-part="figure"] {
  font-size: var(--root-t--font-size--2xl);
}