/*
 * Text styles from Figma: styles / text styles
 * Desktop-first: default = L (≥1280px), @max-width 79.9375rem (1279px) = M, @max-width 63.9375rem (1023px) = S
 * UI, Caption, Copyright: fixed rem (no clamp)
 * Display / Heading: sizes in rem; clamp() to validate in frontend (Figma note)
 */

/* --- Fonts (see assets/css/fonts.css) --- */
:root {
  --dk-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --dk-font-family-display: 'ABC Whyte Inktrap', var(--dk-font-family);

  --dk-font-weight-regular:  400;
  --dk-font-weight-medium:   500;
  --dk-font-weight-semibold: 600;
  --dk-font-weight-bold:     700;
  --dk-font-weight-super:    900;
}

/* --- UI --- */
:root {
  --dk-text-ui-l-size: 2.25rem;
  --dk-text-ui-l-weight: var(--dk-font-weight-semibold);
  --dk-text-ui-m-size: 1.5rem;
  --dk-text-ui-m-weight: var(--dk-font-weight-medium);
  --dk-text-ui-s-size: 1.125rem;
  --dk-text-ui-s-weight: var(--dk-font-weight-medium);
  --dk-text-ui-xs-size: 1rem;
  --dk-text-ui-xs-weight: var(--dk-font-weight-medium);

  /* Display */
  --dk-text-display-l-size: 5rem;
  --dk-text-display-l-weight: var(--dk-font-weight-super);
  --dk-text-display-m-size: 4.5rem;
  --dk-text-display-m-weight: var(--dk-font-weight-super);
  --dk-text-display-s-size: 4rem;
  --dk-text-display-s-weight: var(--dk-font-weight-semibold);

  /* Heading */
  --dk-text-heading-l-size: 4rem;
  --dk-text-heading-l-weight: var(--dk-font-weight-super);
  --dk-text-heading-m-size: 2.5rem;
  --dk-text-heading-m-weight: var(--dk-font-weight-super);
  --dk-text-heading-s-size: 2rem;
  --dk-text-heading-s-weight: var(--dk-font-weight-super);
  --dk-text-heading-xs-size: 1.75rem;
  --dk-text-heading-xs-weight: var(--dk-font-weight-semibold);
  --dk-text-heading-xxs-size: 1.5rem;
  --dk-text-heading-xxs-weight: var(--dk-font-weight-semibold);

  /* Body */
  --dk-text-body-l-size: 2.5rem;
  --dk-text-body-l-weight: var(--dk-font-weight-medium);
  --dk-text-body-m-size: 1.75rem;
  --dk-text-body-m-weight: var(--dk-font-weight-medium);
  --dk-text-body-m-bold-size: 1.75rem;
  --dk-text-body-m-bold-weight: var(--dk-font-weight-bold);
  --dk-text-body-s-size: 1.25rem;
  --dk-text-body-s-weight: var(--dk-font-weight-medium);
  --dk-text-body-s-bold-size: 1.25rem;
  --dk-text-body-s-bold-weight: var(--dk-font-weight-bold);

  /* Caption / Copyright */
  --dk-text-caption-size: 1.125rem;
  --dk-text-caption-weight: var(--dk-font-weight-medium);
  --dk-text-copyright-size: 0.75rem;
  --dk-text-copyright-weight: var(--dk-font-weight-medium);
}

@media (max-width: 79.9375rem) {
  :root {
    --dk-text-ui-l-size: 2.25rem;
    --dk-text-ui-m-size: 1.25rem;
    --dk-text-ui-s-size: 1.125rem;
    --dk-text-ui-xs-size: 1rem;

    --dk-text-display-l-size: 4.5rem; /* 72px — Figma M */
    --dk-text-display-m-size: 4rem;
    --dk-text-display-s-size: 3rem;

    --dk-text-heading-l-size: 3.5rem;
    --dk-text-heading-m-size: 2.25rem;
    --dk-text-heading-s-size: 1.75rem;
    --dk-text-heading-xs-size: 1.5rem;
    --dk-text-heading-xxs-size: 1.25rem;

    --dk-text-body-l-size: 2rem;
    --dk-text-body-m-size: 1.5rem;
    --dk-text-body-m-bold-size: 1.5rem;
    --dk-text-body-s-size: 1.125rem;
    --dk-text-body-s-bold-size: 1.125rem;

    --dk-text-caption-size: 1rem;
  }
}

@media (max-width: 63.9375rem) {
  :root {
    --dk-text-ui-l-size: 1.5rem;
    --dk-text-ui-m-size: 1rem;
    --dk-text-ui-s-size: 1rem;
    --dk-text-ui-xs-size: 0.875rem;

    --dk-text-display-l-size: 2.5rem;
    --dk-text-display-m-size: 2.5rem;
    --dk-text-display-s-size: 2rem;

    --dk-text-heading-l-size: 2.5rem;
    --dk-text-heading-m-size: 2rem;
    --dk-text-heading-s-size: 1.5rem;
    --dk-text-heading-xs-size: 1.25rem;
    --dk-text-heading-xxs-size: 1rem;

    --dk-text-body-l-size: 1.25rem;
    --dk-text-body-m-size: 1.25rem;
    --dk-text-body-m-bold-size: 1.25rem;
    --dk-text-body-s-size: 1rem;
    --dk-text-body-s-bold-size: 1rem;

    --dk-text-caption-size: 0.875rem;
  }
}

/* Preset classes */
.dk-text-ui-l {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-ui-l-size);
  font-weight: var(--dk-text-ui-l-weight);
}

.dk-text-ui-m {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-ui-m-size);
  font-weight: var(--dk-text-ui-m-weight);
}

.dk-text-ui-s {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-ui-s-size);
  font-weight: var(--dk-text-ui-s-weight);
}

.dk-text-ui-xs {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-ui-xs-size);
  font-weight: var(--dk-text-ui-xs-weight);
}

.dk-text-display-l {
  font-family: var(--dk-font-family-display);
  font-size: var(--dk-text-display-l-size);
  font-weight: var(--dk-text-display-l-weight);
}

.dk-text-display-m {
  font-family: var(--dk-font-family-display);
  font-size: var(--dk-text-display-m-size);
  font-weight: var(--dk-text-display-m-weight);
}

.dk-text-display-s {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-display-s-size);
  font-weight: var(--dk-text-display-s-weight);
}

.dk-text-heading-l,
.dk-text-heading-m,
.dk-text-heading-s,
.dk-text-heading-xs,
.dk-text-heading-xxs {
  overflow-wrap: break-word;
  hyphens: auto;
}

.dk-text-heading-l {
  font-family: var(--dk-font-family-display);
  font-size: var(--dk-text-heading-l-size);
  font-weight: var(--dk-text-heading-l-weight);
}

.dk-text-heading-m {
  font-family: var(--dk-font-family-display);
  font-size: var(--dk-text-heading-m-size);
  font-weight: var(--dk-text-heading-m-weight);
}

.dk-text-heading-s {
  font-family: var(--dk-font-family-display);
  font-size: var(--dk-text-heading-s-size);
  font-weight: var(--dk-text-heading-s-weight);
}

.dk-text-heading-xs {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-heading-xs-size);
  font-weight: var(--dk-text-heading-xs-weight);
}

.dk-text-heading-xxs {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-heading-xxs-size);
  font-weight: var(--dk-text-heading-xxs-weight);
}

.dk-text-body-l {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-body-l-size);
  font-weight: var(--dk-text-body-l-weight);
}

.dk-text-body-m {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-body-m-size);
  font-weight: var(--dk-text-body-m-weight);
}

.dk-text-body-m-bold {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-body-m-bold-size);
  font-weight: var(--dk-text-body-m-bold-weight);
}

.dk-text-body-s {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-body-s-size);
  font-weight: var(--dk-text-body-s-weight);
}

.dk-text-body-s-bold {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-body-s-bold-size);
  font-weight: var(--dk-text-body-s-bold-weight);
}

.dk-text-caption {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-caption-size);
  font-weight: var(--dk-text-caption-weight);
}

.dk-text-copyright {
  font-family: var(--dk-font-family);
  font-size: var(--dk-text-copyright-size);
  font-weight: var(--dk-text-copyright-weight);
}

/* Inline text links — Kirbytext-generated <a> tags inside body text
 * (text-1clmn, infobox, chronik-jahr, teaser-special, el-text-box,
 * accordion-item, etc.). Figma "Textlink" component (node 7040-50336).
 * Hand-authored links always carry their own class and are unaffected.
 */
a:not([class]) {
  color: currentColor;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

a:not([class]):hover,
a:not([class]):active {
  text-decoration-thickness: 3px;
}

a:not([class]):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--dk-color-black),
    0 0 0 4px var(--dk-color-white),
    0 0 0 8px var(--dk-color-focus);
}