/**
 * Arnold type tokens on the legacy frontend.
 *
 * Homepage body is Mundial, headings are Fields. Arnold utilities
 * (`type-pretitle`, `type-subtitle`, `heading-h*`) read `--font-sans` /
 * `--font-heading`, which the scoped parent sheet sets to Inter/Archivo
 * fallbacks that are not loaded here.
 *
 * Must use `@scope` so proximity matches arnold-scoped.css. An unscoped
 * `.arnold-content` rule loses to scoped `:scope` even when loaded later.
 */
@scope (.arnold-content) {
  :scope {
    --font-sans: var(--font-mundial-light);
    --font-heading: var(--font-fields-bold);
    /* Preserve the existing Light pretitles now that more Mundial weights load. */
    --pretitle-weight: 300;
    --button-optical-nudge: 0.1em;
  }

  /*
   * Legacy tullholmen.css sets `h1, h2 { font-family: Fields !important }`.
   * Headings here must follow `--font-heading` so predefined classes
   * (mundial / calder / fields headings) can swap the face.
   */
  :is(
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .heading-h1,
      .heading-h2,
      .heading-h3,
      .heading-h4,
      .heading-h5,
      .heading-h6
    ) {
    font-family: var(--font-heading) !important;
  }

  :scope [data-slot='button'][data-size='default'],
  :scope [data-slot='button'][data-size='lg'] {
    --button-py: var(--button-py-sm);
  }

  :scope [data-slot='button'][data-size='sm'] {
    --button-py: var(--button-py-xs);
  }

  :scope [data-slot='button'][data-size='link-sm'] {
    --button-py: calc(var(--button-py-sm) * 0.9);
  }

  :scope [data-slot='button'][data-size='xl'],
  :scope [data-slot='button'][data-size='xxl'] {
    --button-py: var(--button-py-md);
  }

  :scope [data-slot='button'].type-button-hero {
    --button-py: calc(var(--button-py-sm) * var(--hero-type-scale, 1));
  }

  :scope [data-slot='button'].type-button-xxl {
    --button-py: var(--button-py-md);
  }

  :scope [data-slot='button'].type-button-hero.type-button-xxl,
  :scope [data-slot='button'][data-size='hero-xxl'] {
    --button-py: calc(var(--button-py-md) * var(--hero-type-scale, 1));
  }

  /*
   * Mundial sits a hair low in the em-box. Same total height; less top, more bottom
   * so label + arrow sit on the visual midline of the pill.
   */
  :scope [data-slot='button']:not([data-size^='icon']):not([data-variant='script']):not([data-variant='link']):not([data-variant='underline']):not([data-variant='navTextLink']) {
    padding-block-start: calc(var(--button-py, var(--button-py-sm)) - var(--button-optical-nudge));
    padding-block-end: calc(var(--button-py, var(--button-py-sm)) + var(--button-optical-nudge));
  }
}