/* ============================================================
   Balsa — styles.css (Einstiegspunkt für das Design-System)
   Kanonische Quelle: 02-brand/balsa-design-system.md (v2, 2026-07-02)
   + colors_and_type.css (VAD/Homepage source of truth).
   Konsumenten binden NUR diese Datei ein.
   ============================================================ */

@import "./tokens/fonts.css";
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/layout.css";

/* --- Basis --- */
body {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--link); }
a:hover { color: var(--accent-hover); }

::selection { background: var(--balsa-terrakotta-30); color: var(--fg-primary); }

/* Focus: Pflicht-Regel v2 — solide 2px-Outline in Terrakotta.
   outline:none ohne Ersatz ist verboten. Weicher Schein nur ZUSÄTZLICH. */
:focus-visible {
  outline: 2px solid var(--balsa-terrakotta);
  outline-offset: 2px;
}

/* Bewegung: reduced-motion ist Pflicht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   Kanonische Textklassen — bevorzugt vor handgesetzten Größen.
   ============================================================ */
.display { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.h1      { font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.h2      { font-size: var(--fs-xl);  line-height: var(--lh-snug);  font-weight: var(--fw-medium); color: var(--fg-primary); }
.h3      { font-size: var(--fs-lg);  line-height: var(--lh-snug);  font-weight: var(--fw-medium); color: var(--fg-primary); }
.body-lg { font-size: var(--fs-md);  line-height: var(--lh-normal); }
.body    { font-size: var(--fs-base); line-height: var(--lh-normal); }
.body-sm { font-size: var(--fs-sm);  line-height: var(--lh-normal); color: var(--fg-secondary); }
.caption { font-size: var(--fs-xs);  line-height: var(--lh-snug); color: var(--fg-tertiary); }
.label   { font-size: var(--fs-sm);  font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--fg-secondary); }
.eyebrow { font-size: var(--fs-xs);  font-weight: var(--fw-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-accent); }
.code    { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--bg-inset); padding: 2px 6px; border-radius: var(--radius-xs); }

/* Leichte Sprache: eigene Textstufe (Produktmodus, vergaberelevant) */
.leichte-sprache {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  max-width: 60ch;
  text-align: left;
  hyphens: none;
}

/* ============================================================
   Basis-Utility-Klassen (Kanon-Zustände §6).
   Bevorzugt: die React-Komponenten des Systems.
   ============================================================ */
.btn-primary {
  background: var(--accent); color: var(--fg-on-accent);
  font-weight: var(--fw-medium); font-size: var(--fs-base);
  border: none; border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6); min-height: 44px;
  cursor: pointer; transition: background var(--transition-fast);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { background: var(--bg-secondary); color: var(--fg-tertiary); cursor: not-allowed; }
.btn-secondary {
  background: transparent; color: var(--fg-accent);
  font-weight: var(--fw-medium); font-size: var(--fs-base);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6); min-height: 44px;
  cursor: pointer; transition: background var(--transition-fast);
}
.btn-secondary:hover { background: var(--balsa-terrakotta-08); }

.alert {
  border-radius: var(--radius-sm); border: 1px solid; padding: var(--space-4);
  font-size: var(--fs-sm); display: flex; gap: var(--space-3); align-items: flex-start;
}
.alert-error   { background: var(--error-bg);   border-color: var(--error-border);   color: var(--error-text); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.alert-info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-text); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-pill); }
.dot-green { background: var(--indicator-green); }
.dot-amber { background: var(--indicator-amber); }
.dot-red   { background: var(--indicator-red); }

.card {
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm);
}