/* ==========================================================================
   tokens.css — Design tokens from blueprint §2 (verbatim)
   Do not modify these values. They define the entire visual system.
   ========================================================================== */

:root {
  /* ground — crisp light background with subtle slate tones */
  --ink: #FFFFFF;
  --ink-2: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --line: #E2E8F0;
  --line-soft: #F1F5F9;

  /* text — high contrast rich slate */
  --text: #0F172A;
  --text-mid: #475569;
  --text-dim: #64748B;

  /* accent — amber = highlighter = German-language marker */
  --amber: #D97706;
  --amber-hi: #F59E0B;
  --amber-15: rgba(217, 119, 6, 0.08);
  --amber-30: rgba(217, 119, 6, 0.22);

  /* translation layer = English-language marker */
  --blue: #2563EB;
  --blue-12: rgba(37, 99, 235, 0.08);

  /* semantic ONLY — never decorative */
  --green: #16A34A;   /* yes / supported / included */
  --rose: #DC2626;    /* problem state / "the old way" */

  /* type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* layout */
  --wrap: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --r: 10px;
  --r-lg: 16px;

  /* spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 */
  --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;

  /* section rhythm */
  --section-pad: clamp(64px, 9vw, 112px);

  color-scheme: light;
}