/* Source Sans 3 lives here, not in a preset file, because more than one
   preset renders it: Dispatch uses it throughout, and Imprint uses it for
   instructional prose. A preset must not depend on another preset's
   stylesheet being loaded to get its faces.

   Every face the presets render is bundled, unmodified from Adobe's 3.052R
   release, so bold and italic text never falls back to synthetic styling.
   Requests for 600-900 resolve to the bold face. Browsers download a face
   only when a page renders text that needs it. */
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/source-sans-3-regular-7bf1c90b.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/source-sans-3-italic-88956091.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/source-sans-3-bold-7a8a6ef8.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/source-sans-3-bold-italic-e3c18113.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 700;
}

/* Shared preset material: the appearance choices that preview every
   preset side by side. */
/* Presets describe component variants here so they remain below the permanent
   component layer in the architecture while outranking its base selectors. */
@layer components {
  .appearance-choices {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    border: 0;
  }

  .appearance-choices legend {
    margin-bottom: var(--space-3);
    font-weight: 700;
  }

  .appearance-choice {
    display: grid;
    grid-template-columns: auto 5rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-4);
    border: var(--border-thin) solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
  }

  .appearance-choice:has(input:checked) {
    border-color: var(--color-accent);
    box-shadow: inset 3px 0 0 var(--color-accent);
  }

  .appearance-choice input {
    margin-top: 0.2rem;
  }

  .appearance-choice__preview {
    display: grid;
    align-content: center;
    gap: 0.35rem;
    min-height: 3.5rem;
    padding: 0.6rem;
    border: var(--border-thin) solid var(--color-border);
  }

  .appearance-choice__preview i {
    display: block;
    height: 0.2rem;
    background: currentColor;
  }

  .appearance-choice__preview i:nth-child(2) {
    width: 72%;
  }

  .appearance-choice__preview i:nth-child(3) {
    width: 88%;
  }

  .appearance-choice--neutral .appearance-choice__preview {
    background: #fffdf8;
    color: #9d3822;
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  }

  .appearance-choice--dispatch .appearance-choice__preview {
    background: #ffffff;
    color: #0075ad;
    font-family: Arial, Helvetica, sans-serif;
  }

  /* Paper, warm red and the preset-private mono alias, from
     journal-presentation-themes.md section 3.7. These three literals are the
     Imprint palette's canvas and accent; `ColorContrastTest` reads them from
     the preset, so changing one here without changing the preset fails. */
  .appearance-choice--imprint .appearance-choice__preview {
    background: #d7c9ac;
    color: #7c211d;
    font-family: "Imprint Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  .appearance-choice small {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    line-height: 1.45;
  }
}