/* ============================================================
   Balsa — styles.css (Einstiegspunkt für Claude Design)
   Quelle: 02-brand/balsa-design-system.md (v2, 2026-07-02).
   Designs erhalten die @import-Closure dieser Datei.
   ============================================================ */

@import "./tokens/tokens.css";

/* Plus Jakarta Sans — self-hosted (nie Google-Fonts-CDN, DSGVO).
   Variable Font, deckt 200–800: UI nutzt 400/500, Display bis 800. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('./fonts/PlusJakartaSans-Variable.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* --- 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);
}

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

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

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

/* --- Textklassen (Zuordnung angenähert an die Skala; kanonische Definitionen
   liegen in colors_and_type.css im Produkt-Repo — beim vollen Sync übernehmen) --- */
.display { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -.01em; }
.h1      { font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: 600; letter-spacing: -.01em; }
.h2      { font-size: var(--fs-xl);  line-height: var(--lh-snug);  font-weight: var(--fw-medium); }
.h3      { font-size: var(--fs-lg);  line-height: var(--lh-snug);  font-weight: var(--fw-medium); }
.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); }
.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); letter-spacing: .04em; }
.eyebrow { font-size: var(--fs-xs);  font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-accent); }
.code    { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* 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;
}

/* --- Buttons (Kanon-Zustände §6) --- */
.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; /* Touch-Ziel */
  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); }

/* --- Alerts (EIN warmer Satz — immer Icon + Text, nie Farbe allein) --- */
.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); }

/* --- Indikator-Dots (nur mit Label daneben) --- */
.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); }

/* --- Karten/Flächen --- */
.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);
}