@layer reset, base, layout, components, utilities;

@layer base {
  /* The page is grid paper; every view sits on a sheet laid over it. */
  body {
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    padding: calc(var(--block-space) * 1.25) calc(var(--inline-space) * 2);
    background-color: var(--color-page);
    background-image:
      linear-gradient(var(--color-page-grid) var(--rule-width), transparent var(--rule-width)),
      linear-gradient(90deg, var(--color-page-grid) var(--rule-width), transparent var(--rule-width));
    background-size: var(--grid-size) var(--grid-size);
    color: var(--color-ink);
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: var(--leading);
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3 {
    font-stretch: var(--stretch-condensed);
    font-weight: var(--weight-heavy);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  /* A title, as in a drawing's title block. */
  h1 {
    font-size: var(--text-2xl);
    text-transform: uppercase;
  }

  h2 {
    font-size: var(--text-xl);
  }

  h3 {
    font-size: var(--text-lg);
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-underline-offset: 0.15em;

    &:hover {
      color: var(--color-accent-hover);
    }
  }

  :focus-visible {
    outline: calc(var(--rule-width) * 2) solid var(--color-ink);
    outline-offset: calc(var(--rule-width) * 2);
  }

  /* The drawing sheet: a single structural rule around everything. */
  .sheet {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-sheet);
  }

  .sheet__main {
    flex-grow: 1;
  }

  /* The small tracked caps that head every title-block cell. */
  .label {
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--color-ink-dim);
  }
}