/* ============================================================================
   Basis — Reset, Typografie, Fokus.
   Das einzige globale Stylesheet neben den Tokens (FE-17).
   ========================================================================== */

/* Einbindereihenfolge — bewusst als <link>, nicht als @import:
   @import blockiert paralleles Laden und kostet Ladezeit (NFA-2).

     tokens/primitives.css
     tokens/semantic.css
     tokens/zones.css
     tokens/measures.css
     ui/base.css
     ui/components.css                                                        */

/* corner-shape wirkt nur dort, wo ohnehin ein Radius gesetzt ist, und macht
   aus jeder Ecke eine Squircle — so, wie es im Styleguide gezeichnet ist. Browser
   ohne Unterstützung zeigen die gewohnte Rundung; nichts bricht. */
*,
*::before,
*::after {
  box-sizing: border-box;
  corner-shape: squircle;
}
* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: 1.55;
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* Eine Squircle mit sehr grossem Radius ist keine Pille, sondern ein
   Superellipsen-Rechteck. Alles, was vollrund sein soll, nimmt deshalb
   ausdrücklich die gewöhnliche Rundung zurück (FE-29). */
.chip,
.pill,
.eyebrow::before,
.icon-button,
.icon-button__dot,
.progress,
.progress__value,
.spinner,
.nav__user-avatar,
.avatar,
.steps__marker,
.switch__control,
.switch__control::after,
.ring,
.ring::before,
.emblem__progress,
.emblem__progress::before,
.avatar-frame__dot,
.rating__star,
.nav__item[aria-current]::before,
.banner::before,
.input--search,
.suggest__chip {
  corner-shape: round;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

/* Ein Link traegt die Textfarbe seiner Zone, nicht das Blau des Browsers
   (Issue #66). Unterstrichen bleibt er: Auf Tinte oder Gruen faende kein Blau
   genug Kontrast, und die Farbe allein darf den Unterschied ohnehin nicht
   tragen (WCAG 1.4.1). Knoepfe im Linkkleid setzen Farbe und Strich selbst
   (FE-81) und bleiben unberuehrt — eine Klasse schlaegt den Elementselektor. */
a {
  color: var(--zone-text-strong);
}

/* --- Fokus (FE-26/FE-35) -------------------------------------------------- *
 * 3 px, außen liegend, Farbe aus der Zone. Deshalb funktioniert derselbe
 * Ring auf Weiß, auf Grün und auf Tinte — ohne eine einzige Variante.        */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--border-focus) solid var(--zone-focus, var(--text-primary));
  outline-offset: var(--space-0-5);
  border-radius: var(--radius-sm);
}

/* --- Icons ---------------------------------------------------------------- *
 * FE-23: Icons sind Referenzen auf ein Sprite, nie Inline-SVG im Komponenten-
 * code. Aufruf immer so:
 *
 *   <svg class="icon" aria-hidden="true"><use href="#house"></use></svg>
 *   <svg class="icon"><use href="/assets/icons.1f7b4aa8.svg#trophy"></use></svg>
 *
 * Ein Symbol ist im Dokument genau einmal definiert, egal wie oft es vorkommt.
 * fill="currentColor" steckt in der Quelle — das Icon erbt die Zonenfarbe
 * ohne eine einzige zusätzliche Regel.
 *
 * Bedeutungstragende Icons brauchen eine Textalternative, dekorative
 * aria-hidden="true" (FE-24).                                               */
.icon {
  inline-size: var(--size-icon);
  block-size: var(--size-icon);
  flex: none;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentcolor;
}

.icon--nav {
  --size-icon: var(--size-icon-nav);
}

/* Tonmodifikatoren. Immer ZUSAETZLICH zur Form — ein grüner Haken ist grün UND
   ein Haken (FE-33). Die Farbe kommt aus der Zone, deshalb stimmt sie auch auf
   Grün und auf Tinte.
 *
 * --icon-tone zusätzlich zu color: Komponenten, die ihre Icons selbst einfärben
 * (.list--icon, .data-list, .list-group …), lesen --icon-tone als Vorrang. Ohne
 * das gewönne dort die Komponentenregel über die Spezifität — ein Modifikator,
 * der mal wirkt und mal nicht, ist schlimmer als keiner. */
.icon--success {
  --icon-tone: var(--zone-text-success);
  color: var(--zone-text-success);
}

.icon--warning {
  --icon-tone: var(--zone-text-warning);
  color: var(--zone-text-warning);
}

.icon--danger {
  --icon-tone: var(--zone-text-danger);
  color: var(--zone-text-danger);
}