/* LOKALE KOPIE — claude.ai/design "Capture & Scale Design System"
   (3a3ef1b2-cb49-4efa-9858-a00f83ec8d89, Stand 2026-07-11).
   1:1 gespiegelt, nicht von Hand ändern — Sync: docs/design-system.md */

/* ============================================================
   Capture & Scale — Typography
   Display: Epilogue  ·  Body/UI: Plus Jakarta Sans
   HUD labels: mono, uppercase, wide tracking.
   Character: Klar. Modern. Technisch. Selbstbewusst.
   ============================================================ */

:root {
  /* --- Families ------------------------------------------ */
  --font-display: "Epilogue", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* --- Weights ------------------------------------------- */
  --w-light:     300;  /* @kind font */
  --w-regular:   400;  /* @kind font */
  --w-medium:    500;  /* @kind font */
  --w-semibold:  600;  /* @kind font */
  --w-bold:      700;  /* @kind font */
  --w-extrabold: 800;  /* @kind font */

  /* --- Type scale (fluid-ready px values) ---------------- */
  --fs-display:  4.5rem;   /* 72 — hero headline            */
  --fs-h1:       3.25rem;  /* 52                            */
  --fs-h2:       2.375rem; /* 38                            */
  --fs-h3:       1.75rem;  /* 28                            */
  --fs-h4:       1.3125rem;/* 21                            */
  --fs-lead:     1.25rem;  /* 20 — lead paragraph           */
  --fs-body:     1.0625rem;/* 17 — body                     */
  --fs-sm:       0.9375rem;/* 15                            */
  --fs-xs:       0.8125rem;/* 13                            */
  --fs-label:    0.75rem;  /* 12 — HUD label                */
  --fs-micro:    0.6875rem;/* 11 — reticle / caption        */

  /* --- Line heights -------------------------------------- */
  --lh-tight:    1.04;   /* @kind font */
  --lh-snug:     1.18;   /* @kind font */
  --lh-heading:  1.12;   /* @kind font */
  --lh-body:     1.6;    /* @kind font */
  --lh-relaxed:  1.72;   /* @kind font */

  /* --- Letter spacing ------------------------------------ */
  --ls-display: -0.03em;   /* @kind font */
  --ls-heading: -0.018em;  /* @kind font */
  --ls-body:    0;         /* @kind font */
  --ls-label:   0.16em;    /* @kind font */
  --ls-wide:    0.24em;    /* @kind font */
}

/* ============================================================
   Base document type — cosmetic reset for consumers
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Reusable type utility classes --------------------- */
.cs-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--w-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
}
.cs-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--w-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-display); color: var(--text-heading); }
.cs-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--w-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--text-heading); }
.cs-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--text-heading); }
.cs-h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--w-semibold); line-height: var(--lh-snug); color: var(--text-heading); }

.cs-lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-secondary); font-weight: var(--w-regular); }
.cs-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); }
.cs-small { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-secondary); }

/* HUD label — uppercase, mono, wide-tracked, often accent-tinted */
.cs-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
}
/* Data readout — big numbers in mono, tabular */
.cs-readout {
  font-family: var(--font-mono);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}