/* kla.ng Designsystem: Grundlage. Nur Tokens (--kla-*), keine Rohwerte. Nach tokens.css einbinden. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kla-color-bg);
  color: var(--kla-color-fg);
  font-family: var(--kla-font-sans);
  font-feature-settings: var(--kla-font-features);
  font-weight: var(--kla-weight-regular);
  font-size: var(--kla-text-body);
  line-height: var(--kla-text-body-line);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; font-weight: var(--kla-weight-bold); letter-spacing: var(--kla-tracking-tight); }
h1 { font-size: var(--kla-text-display); line-height: var(--kla-text-display-line); letter-spacing: var(--kla-tracking-display); }
h2 { font-size: var(--kla-text-title); line-height: var(--kla-text-title-line); }
h3 { font-size: var(--kla-text-head); line-height: var(--kla-text-head-line); font-weight: var(--kla-weight-medium); letter-spacing: 0; }
p { margin: 0; }
strong, b { font-weight: var(--kla-weight-medium); }

a { color: var(--kla-color-link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

mark { background: var(--kla-color-mark-bg); color: var(--kla-color-mark-fg); border-radius: 0.15em; padding: 0 0.12em; }
code, kbd, pre { font-family: var(--kla-font-mono); font-size: 0.9em; }
code { background: var(--kla-color-code-bg); border-radius: var(--kla-radius-sm); padding: 0.1em 0.35em; }
pre { background: var(--kla-color-code-bg); border-radius: var(--kla-radius-lg); padding: var(--kla-space-12) var(--kla-space-16); overflow-x: auto; }
pre code { background: none; padding: 0; }

hr { border: 0; border-top: 1px solid var(--kla-color-line); margin: var(--kla-space-24) 0; }
::selection { background: var(--kla-color-tint); color: var(--kla-color-on-tint); }

:focus-visible { outline: var(--kla-focus) solid var(--kla-color-accent); outline-offset: 2px; }

button, input, textarea, select { font: inherit; font-feature-settings: inherit; color: inherit; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }