/* Gestaltungs-Tokens (DESIGN-KONZEPT.md Abschnitt 3). Keine Farbe, Groesse oder Zeit steht direkt in einer Komponente. */
:root {
  --ink: #0F1B2D;
  --paper: #F7F8FA;
  --surface: #FFFFFF;
  --line: #E3E7EE;
  --muted: #5D6778;
  --accent: #1B5FD1;
  --accent-strong: #1449A8;
  --accent-soft: #E8F0FD;
  --ok: #0C7A57;
  --warn: #AB500A;
  --err: #B3261E;
  --err-soft: #FCEDEC;
  --ok-soft: #E6F5EF;
  --ink-2: #16253D;
  --on-dark: #F2F5FA;
  --on-dark-muted: #B4BFD3;
  --cyan: #3FA7D6;
  --indigo: #5B6CF0;
  --neutral-soft: #EEF1F6;
  --neutral-ink: #4A5568;

  --font: "Geist", system-ui, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-hero: clamp(1.625rem, .9rem + 3.6vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-text: 1.0625rem;
  --fs-small: .875rem;

  --r-card: 16px;
  --r-field: 14px;
  --r-pill: 999px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  --w-page: 1120px;
  --w-read: 640px;
  --w-tool: 760px;

  --shadow-1: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px rgba(15, 27, 45, .06);
  --shadow-2: 0 2px 4px rgba(15, 27, 45, .08), 0 14px 36px rgba(15, 27, 45, .14);
  --ring: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-soft);

  --t-fast: 150ms;
  --t-base: 280ms;
  --t-slow: 520ms;
  --t-count: 900ms;
  --ease: cubic-bezier(.22, .8, .24, 1);
}