/* =====================================================================
   Mind driven Shooting · Design-Tokens
   Quelle: Buchcover „Denken schlägt Gedanken", CLAUDE.md §3, Design-System-Board
   ===================================================================== */

:root {
  /* Farbe · monochrom, keine Signalfarbe */
  --mds-ink:      #090A0C;   /* Grundfläche, 73 % des Covers */
  --mds-surface:  #353638;   /* Sekundärfläche, Platzhalter, Banner */
  --mds-paper:    #E5E8EB;   /* Primärtext auf Dunkel, Primär-CTA, helle Sektion */
  --mds-steel:    #9AA9B8;   /* einziger Akzent: Kursivwort, Eyebrow, Rahmen, Icons */
  --mds-muted:    #BDC0C3;   /* Fließtext auf Dunkel = Paper 82 %, gegen Blendung */
  --mds-stage:    #0F1012;   /* leicht abgesetzte Fläche, z. B. Vorschau-Bühne */

  /* Haarlinien */
  --mds-hair:        rgba(154, 169, 184, 0.25);  /* auf Dunkel */
  --mds-hair-strong: rgba(154, 169, 184, 0.40);  /* Formularrahmen auf Dunkel */
  --mds-hair-light:  rgba(9, 10, 12, 0.18);      /* auf Hell */

  /* Typografie · eine Familie */
  --mds-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --mds-h1:      72px;  --mds-h1-lh: 1.02; --mds-h1-ls: -0.02em;   /* Versal, nur Leitsätze bis sechs Wörter */
  --mds-h1-lang: 56px;  --mds-h1-lang-lh: 1.05;                    /* gemischt, längere Titel */
  --mds-h2:      48px;  --mds-h2-lh: 1.05; --mds-h2-ls: -0.015em;
  --mds-h3:      24px;  --mds-h3-lh: 1.25;
  --mds-lead:    22px;  --mds-lead-lh: 1.5;
  --mds-body:    18px;  --mds-body-lh: 1.6;
  --mds-small:   15px;  --mds-small-lh: 1.5;
  --mds-quote:   28px;  --mds-quote-lh: 1.35;
  --mds-eyebrow: 12px;  --mds-eyebrow-ls: 0.22em;
  --mds-button:  14px;  --mds-button-ls: 0.10em;

  /* Abstände · 8er-Raster */
  --mds-s1: 4px;  --mds-s2: 8px;   --mds-s3: 12px;  --mds-s4: 16px;
  --mds-s5: 24px; --mds-s6: 32px;  --mds-s7: 48px;  --mds-s8: 64px;
  --mds-s9: 96px; --mds-section: 140px; --mds-section-mobile: 72px;

  /* Layout */
  --mds-container: 1200px;
  --mds-gutter: 24px;
  --mds-radius: 2px;            /* maximal 4 px, kein Schatten, kein Verlauf */
  --mds-header: 96px;
  --mds-header-sticky: 72px;
  --mds-header-mobile: 72px;
  --mds-control: 52px;          /* Höhe Button und Eingabefeld */
  --mds-control-sm: 44px;
}

@media (max-width: 767px) {
  :root {
    --mds-h1: 44px;
    --mds-h1-lang: 34px;
    --mds-h2: 32px;
    --mds-h3: 22px;
    --mds-lead: 19px;
    --mds-body: 17px;
    --mds-section: var(--mds-section-mobile);
    --mds-gutter: 16px;
  }
}