/* Designsystem „Hell & ruhig“ (Design A, preisdip, Entscheidung Kevin Sawallisch 05.11.2026)
   Angelehnt an die Ruhe der Apple-Produktseiten: viel Weißraum, große Schrift, abgerundete Flächen, Pillen-Knöpfe.
   Eine Akzentfarbe, sparsam: Markenwort, Links, Hinweise. Hell und dunkel nach Gerät, umschaltbar über data-theme.
   In ein Projekt kopieren (z. B. public/tokens.css) und vor dem eigenen CSS laden. Je Projekt darf nur --accent
   (samt -hover, -soft und den Dunkel-Werten) abweichen; alles andere bleibt gleich. */

:root {
  /* Flächen */
  --bg: #ffffff;
  --bg-alt: #f5f5f7; /* abgesetzte Abschnitte, Seitenhintergrund unter Karten */
  --surface: #ffffff; /* Karten und Kacheln auf --bg-alt */
  --nav-bg: rgba(251, 251, 253, 0.82);

  /* Text */
  --text: #1d1d1f;
  --muted: #6e6e73; /* Fließtext zweiter Ordnung, Unterzeilen */
  --faint: #86868b; /* Ränge, Fußnoten (nur ab 13 px fett bzw. ab 15 px) */

  /* Linien */
  --line: #e5e5ea;
  --line-strong: #d2d2d7;

  /* Akzent – preisdip: Pflaume. Andere Projekte setzen hier ihre Farbe */
  --accent: #7d4f86;
  --accent-hover: #5f3a67;
  --accent-soft: #efe5f0;

  /* Zustände */
  --good: #1d7a3a;
  --warn: #a15c07;
  --bad: #b3261e;

  /* Hauptknopf */
  --btn: #1d1d1f;
  --btn-ink: #ffffff;

  /* Schrift */
  --font: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Größen */
  --fs-hero: clamp(48px, 7vw, 80px);
  --fs-h1: clamp(36px, 5vw, 56px);
  --fs-h2: clamp(28px, 3.6vw, 40px);
  --fs-card: 28px;
  --fs-lead: clamp(19px, 2vw, 24px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-tiny: 12px;
  --tracking-tight: -0.03em;
  --tracking-title: -0.02em;

  /* Rundungen */
  --r-tile: 28px; /* große Kacheln */
  --r-card: 22px; /* Zeilenkarten, Kästen */
  --r-logo: 14px;
  --r-pill: 980px; /* Knöpfe, Filter, Knopfleisten */

  /* Abstände */
  --container: 1024px;
  --gutter: 22px;
  --section-y: clamp(56px, 8vw, 96px);
  --gap: 20px;
}

/* Dunkel nach Gerät, außer ausdrücklich hell gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #000000;
    --bg-alt: #101011;
    --surface: #1c1c1e;
    --nav-bg: rgba(29, 29, 31, 0.72);
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --faint: #98989d;
    --line: #2c2c2e;
    --line-strong: #3a3a3c;
    --accent: #d3b3da; /* helle Fassung der Akzentfarbe, auf Schwarz lesbar */
    --accent-hover: #ead7ee;
    --accent-soft: #3a2a3e;
    --good: #4cd07a;
    --warn: #f0b35a;
    --bad: #ff6b60;
    --btn: #f5f5f7;
    --btn-ink: #1d1d1f;
  }
}
:root[data-theme='dark'] {
  --bg: #000000;
  --bg-alt: #101011;
  --surface: #1c1c1e;
  --nav-bg: rgba(29, 29, 31, 0.72);
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --faint: #98989d;
  --line: #2c2c2e;
  --line-strong: #3a3a3c;
  --accent: #d3b3da;
  --accent-hover: #ead7ee;
  --accent-soft: #3a2a3e;
  --good: #4cd07a;
  --warn: #f0b35a;
  --bad: #ff6b60;
  --btn: #f5f5f7;
  --btn-ink: #1d1d1f;
}

@media (max-width: 734px) {
  :root {
    --gutter: 16px;
    --fs-card: 24px;
    --r-tile: 22px;
  }
}

/* Grundstil */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-body); line-height: 1.47; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }