/* optiload — Design Tokens (Single Source of Truth)
   CI: hell/editorial, kräftiges Rot als Signalfarbe. Auffällig, edel, modern.
   Verwendet von Design-System-Previews UND der Web-App. */

:root {
  /* ---------- Farben: Basis (hell/editorial) ---------- */
  --canvas:      #FBFAF7;   /* warmes Papierweiss, Seitenhintergrund */
  --surface:     #FFFFFF;   /* Karten/Flächen */
  --surface-2:   #F4F2EC;   /* leicht abgesetzt */
  --ink:         #14141A;   /* Haupttext, near-black */
  --ink-soft:    #3A3A42;   /* Fließtext */
  --muted:       #6B6B72;   /* sekundär, Captions */
  --hairline:    #E7E5DF;   /* feine Linien statt Schatten */
  --hairline-2:  #D9D6CE;

  /* ---------- Signalfarbe: Rot (kein Orange/Gelb) ---------- */
  --red:         #E11020;   /* primär, „auffällig" */
  --red-hover:   #B00C18;
  --red-press:   #900A14;
  --red-ink:     #8A0A14;   /* rote Schrift auf hell, kontraststark */
  --red-tint:    #FDECEC;   /* rote Flächen/Alarm-Hintergrund */
  --red-line:    #F6C9CC;

  /* ---------- Status (sparsam) ---------- */
  --good:        #1E9E5A;   /* bestanden */
  --good-tint:   #E7F6EE;
  --good-ink:    #0F7A43;   /* gruene Schrift auf hell, kontraststark */
  --neutral:     #6B6B72;

  /* ---------- Typografie ---------- */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;   /* editorial Serif-Display */
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;

  --fs-hero:   clamp(2.6rem, 6vw, 5rem);   /* Hero-Headline */
  --fs-h1:     clamp(2rem, 4vw, 3.2rem);
  --fs-h2:     clamp(1.5rem, 2.6vw, 2.1rem);
  --fs-h3:     1.3rem;
  --fs-lead:   1.2rem;   /* Vorspann */
  --fs-body:   1.0rem;
  --fs-sm:     0.875rem;
  --fs-xs:     0.75rem;

  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-body:   1.6;
  --tracking-tight: -0.02em;
  --tracking-caps:   0.12em;

  /* ---------- Abstände (4px-Basis) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* ---------- Radius ---------- */
  --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-pill: 999px;

  /* ---------- Schatten (editorial = zurückhaltend) ---------- */
  --shadow-sm: 0 1px 2px rgba(20,20,26,.05);
  --shadow:    0 6px 24px rgba(20,20,26,.08);
  --shadow-red:0 8px 30px rgba(225,16,32,.18);

  /* ---------- Layout ---------- */
  --maxw: 1160px;
  --maxw-text: 68ch;
}

/* ---------- Reset/Grundlagen für Previews & Seite ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); margin: 0 0 .4em; color: var(--ink); }
a { color: var(--red-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Utility-Klassen ---------- */
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--red); font-weight: 500; }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.5; }
.muted { color: var(--muted); }
.accent { color: var(--red); }
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-5); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body);
  padding: 14px 26px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  line-height: 1; }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--red); color: #fff; box-shadow: var(--shadow-red); }
.btn--primary:hover { background: var(--red-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--lg { padding: 18px 34px; font-size: 1.05rem; }

/* ---------- Karten ---------- */
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: var(--sp-6); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: .04em; padding: 5px 11px; border-radius: var(--r-pill);
  font-weight: 500; }
.badge--bad  { background: var(--red-tint);  color: var(--red-ink);  border: 1px solid var(--red-line); }
.badge--good { background: var(--good-tint); color: var(--good-ink); border: 1px solid #BFE6CF; }
.badge--neutral { background: var(--surface-2); color: var(--muted); border: 1px solid var(--hairline); }