/**
 * _typography.css — Prose (.ui-prose) and figcaption reset
 *
 * @layer      variables, reset, components, utilities
 * @requires   layers.css, _variables.css, _reset.css (figcaption baseline)
 * @uses       Type tokens — consumes --font-family-*, --font-size-*,
 *             --font-weight-*, --leading-*, --tracking-* from _variables.css;
 *             exposes .text-* (scale) and Tailwind-style .font-* (weight) utilities
 * @uses       font-optical-sizing — heading optical size
 * @tokens     --ui-prose-* (@layer variables)
 */

@layer variables {
  :root {
    --ui-prose-figcaption-margin: var(--gap-xs) 0 0 0;
    /* 0 preserves the figcaption-margin spacing; a length adds flex gap on top */
    --ui-prose-figcaption-gap: 0px;
    --ui-prose-img-radius: var(--radius-md);
    --ui-prose-img-border: none;
    --ui-prose-link-color: var(--primary);
  }
}

@layer zazz.components {
  /* ===========================================================================
  TYPOGRAPHY — prose component styles
  =========================================================================== */

  :where(.ui-prose) {
    flex-direction: column;
    display: flex;
  }

  :where(.ui-prose h1) {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-h1);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-h1);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.ui-prose h2) {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-h2);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.ui-prose h3) {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-h3);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.ui-prose h4) {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-h4);
    line-height: var(--leading-h4);
    letter-spacing: var(--tracking-h4);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.ui-prose h5) {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-h5);
    line-height: var(--leading-h5);
    letter-spacing: var(--tracking-h5);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.ui-prose h6) {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-h6);
    line-height: var(--leading-h6);
    letter-spacing: var(--tracking-h6);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.ui-prose p) {
    font-size: var(--font-size-md);
    line-height: var(--leading-md);
    letter-spacing: var(--tracking-md);
  }

  :where(.ui-prose a) {
    color: var(--ui-prose-link-color);
    text-decoration-line: var(--decoration-line);
    text-decoration-style: var(--decoration-style);
    text-decoration-color: var(--decoration-color);
    text-underline-offset: var(--decoration-offset);
    text-decoration-thickness: var(--decoration-thickness);
    transition: var(--default-transition);
  }

  :where(.ui-prose a:hover) {
    text-decoration-color: var(--decoration-color--hover);
    text-underline-offset: var(--decoration-offset--hover);
  }

  :where(.ui-prose a:active) {
    text-decoration-color: var(--decoration-color--active);
    text-underline-offset: var(--decoration-offset--active);
  }

  :where(.ui-prose strong, .ui-prose b) {
    font-weight: var(--font-weight-strong);
  }

  :where(.ui-prose em, .ui-prose i) {
    font-style: italic;
  }

  :where(.ui-prose figure) {
    inline-size: 100%;
    max-inline-size: 100%;
    display: flex;
    flex-direction: column;
  }

  :where(.ui-prose figure:has(img, video)) {
    gap: var(--ui-prose-figcaption-gap);
  }

  :where(.ui-prose img, .ui-prose video) {
    border-radius: var(--ui-prose-img-radius);
    border: var(--ui-prose-img-border);
  }

  :where(.ui-prose figure:has(img, video) > figcaption) {
    display: flex;
    margin: var(--ui-prose-figcaption-margin);
    font-style: italic;
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    line-height: var(--leading-md);
    font-weight: var(--font-weight-body);
    letter-spacing: var(--tracking-md);
  }

  :where(.ui-prose figcaption:has(+ :where(ul, ol, dl))) {
    font-weight: var(--font-weight-strong);
  }

  :where(.ui-prose ul) {
    list-style: disc;
    padding-inline-start: var(--gap-md);
  }

  :where(.ui-prose ol) {
    list-style: decimal;
    padding-inline-start: var(--gap-md);
  }

  :where(.ui-prose dl > dd) {
    padding-inline-start: var(--gap-md);
  }

  :where(.ui-prose dl > dt) {
    font-weight: var(--font-weight-strong);

    &::after {
      content: ":";
    }
  }

  :where(.ui-prose blockquote) {
    padding-inline-start: var(--gap-sm);
    border-inline-start: 1px solid var(--border);
    font-style: italic;
  }

  :where(.ui-prose blockquote > cite) {
    color: var(--muted-foreground);
    padding-inline-start: var(--gap-xs);
    font-style: normal;
    font-size: var(--font-size-sm);
    line-height: var(--leading-sm);
    font-weight: var(--font-weight-body);
    letter-spacing: var(--tracking-sm);
  }

  /* ===========================================================================
  PARAGRAPH RHYTHM — top margin on non-first blocks within .ui-prose
  =========================================================================== */

  :where(.ui-prose hgroup:not(:first-child)) {
    font-size: var(--font-size-xl);
    margin-block-start: var(--paragraph-spacing-xl);
  }

  :where(.ui-prose ul:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-md);
  }

  :where(.ui-prose ol:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-md);
  }

  :where(.ui-prose dl:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-md);
  }

  :where(
    .ui-prose figure :where(ul, ol, dl):first-child,
    .ui-prose figure > figcaption + :where(ul, ol, dl):nth-child(2)
  ) {
    margin-block-start: 0rem;
  }

  :where(.ui-prose .text-display:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-display);
  }

  :where(.ui-prose .text-h1:not(:first-child), .ui-prose h1:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-display);
  }

  :where(.ui-prose .text-h2:not(:first-child), .ui-prose h2:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-h2);
  }

  :where(.ui-prose .text-h3:not(:first-child), .ui-prose h3:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-h3);
  }

  :where(.ui-prose .text-h4:not(:first-child), .ui-prose h4:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-h4);
  }

  :where(.ui-prose .text-h5:not(:first-child), .ui-prose h5:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-h5);
  }

  :where(.ui-prose .text-h6:not(:first-child), .ui-prose h6:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-h6);
  }

  :where(.ui-prose .text-xl:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-xl);
  }

  :where(.ui-prose .text-lg:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-lg);
  }

  :where(.ui-prose .text-md:not(:first-child), .ui-prose p:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-md);
  }

  :where(.ui-prose .text-sm:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-sm);
  }

  :where(.ui-prose .text-xs:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-xs);
  }

  :where(.ui-prose .text-eyebrow:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-eyebrow);
  }

  :where(.ui-prose hr:first-child) {
    margin-block-end: calc(var(--gap-md) * var(--paragraph-spacing-multiplier));
  }

  :where(.ui-prose hr:not(:first-child)) {
    margin-block: calc(var(--gap-lg) * var(--paragraph-spacing-multiplier));
  }

  :where(.ui-prose .text-eyebrow + *) {
    margin-block-start: var(--paragraph-spacing-xs);
  }

  :where(.ui-prose figure:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-md);
  }

  :where(.ui-prose figure:not(:first-child):has(:is(img, video))) {
    margin-block-start: calc(var(--paragraph-spacing-md) * 2);
  }

  :where(.ui-prose dl > dt:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-md);
  }

  :where(.ui-prose blockquote:not(:first-child)) {
    margin-block-start: var(--paragraph-spacing-lg);
  }

  :where(.ui-prose blockquote:not(:last-child)) {
    margin-block-end: var(--paragraph-spacing-lg);
  }
}

@layer zazz.utilities {
  /* ===========================================================================
  TYPOGRAPHY — type scale, weight & link utilities
  =========================================================================== */

  :where(.text-display) {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-display);
    line-height: var(--leading-display);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.text-h1) {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h1);
    line-height: var(--leading-h1);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--tracking-h1);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.text-h2) {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    line-height: var(--leading-h2);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--tracking-h2);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.text-h3) {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h3);
    line-height: var(--leading-h3);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--tracking-h3);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.text-h4) {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h4);
    line-height: var(--leading-h4);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--tracking-h4);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.text-h5) {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h5);
    line-height: var(--leading-h5);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--tracking-h5);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.text-h6) {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    line-height: var(--leading-h6);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--tracking-h6);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(.text-xl) {
    font-size: var(--font-size-xl);
    line-height: var(--leading-xl);
    letter-spacing: var(--tracking-xl);
  }

  :where(.text-lg) {
    font-size: var(--font-size-lg);
    line-height: var(--leading-lg);
    letter-spacing: var(--tracking-lg);
  }

  :where(.text-md) {
    font-size: var(--font-size-md);
    line-height: var(--leading-md);
    letter-spacing: var(--tracking-md);
  }

  :where(.text-sm) {
    font-size: var(--font-size-sm);
    line-height: var(--leading-sm);
    letter-spacing: var(--tracking-sm);
  }

  :where(.text-xs) {
    font-size: var(--font-size-xs);
    line-height: var(--leading-xs);
    letter-spacing: var(--tracking-xs);
  }

  :where(.text-eyebrow) {
    display: inline-flex;
    font-size: var(--font-size-eyebrow);
    line-height: var(--leading-eyebrow);
    font-weight: var(--font-weight-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }

  :where(.text-link) {
    color: var(--primary);
    text-decoration-line: var(--decoration-line);
    text-decoration-style: var(--decoration-style);
    text-decoration-color: var(--decoration-color);
    text-underline-offset: var(--decoration-offset);
    text-decoration-thickness: var(--decoration-thickness);
    transition: var(--default-transition);
  }

  :where(.text-link:hover) {
    text-decoration-color: var(--decoration-color--hover);
    text-underline-offset: var(--decoration-offset--hover);
  }

  :where(.text-link:active) {
    text-decoration-color: var(--decoration-color--active);
    text-underline-offset: var(--decoration-offset--active);
  }

  /* Base font weights */
  :where(.font-thin) {
    font-weight: 100;
  }

  :where(.font-extralight) {
    font-weight: 200;
  }

  :where(.font-light) {
    font-weight: 300;
  }

  :where(.font-normal) {
    font-weight: 400;
  }

  :where(.font-medium) {
    font-weight: 500;
  }

  :where(.font-semibold) {
    font-weight: 600;
  }

  :where(.font-bold) {
    font-weight: 700;
  }

  :where(.font-extrabold) {
    font-weight: 800;
  }

  :where(.font-black) {
    font-weight: 900;
  }

  /* Semantic font weights */
  :where(.font-body) {
    font-weight: var(--font-weight-body);
  }

  :where(.font-heading) {
    font-weight: var(--font-weight-heading);
  }

  :where(.font-strong) {
    font-weight: var(--font-weight-strong);
  }

  :where(.italic) {
    font-style: italic;
  }

  :where(.underline) {
    text-decoration-line: underline;
  }

  :where(.overline) {
    text-decoration-line: overline;
  }

  :where(.line-through) {
    text-decoration-line: line-through;
  }

  :where(.no-underline) {
    text-decoration-line: none;
  }
}