/* =====================================================================
   locomo – Design-Tokens
   Einzige Quelle für alle Maße, Farben und Schriftwerte.
   Herleitung: siehe Projekt-Dokument „locomo-onepager-planung.md“, Abschnitt 8.
   Regel: Komponenten-CSS verwendet ausschließlich diese Variablen.
   Desktop-Werte stehen in :root, Mobile-Werte (< 768 px) im Media-Query darunter.
   ===================================================================== */

/* Schriftdateien: siehe fonts.css */

:root {
  /* ---------- Farben ---------- */
  --color-ink: #000000;          /* Text, Logo, Linien */
  --color-paper: #ffffff;        /* Seitenhintergrund, Stage in Start/A/B */
  --color-sand: #eeeae4;         /* Schürze, Stage in C, Modal, Footer */
  --color-sand-light: #f5f2ef;   /* Switch aktiv */

  /* ---------- Farben der Infografik (Vorgabe Felix, 11.11.2026) ----------
     Alle bildlichen Elemente: diese Farbe mit 60 % Deckkraft und 5 px Weichzeichnung,
     so wie in CSS:  background: rgba(175, 221, 250, 0.6);  filter: blur(5px);
     Ausnahmen: Sand-Fläche in C deckend und scharf, Schlusskreis weiß deckend mit Blur. */
  --shape-opacity: 0.6;
  --shape-blur: 5;               /* px (Desktop); skaliert mit der Formgröße */

  /* Start: drei Kreise */
  --color-start-aqua: #affaf5;
  --color-start-sky: #afddfa;
  --color-start-mint: #affad4;

  /* Sequenz A: fünf Anforderungssegmente (Reihenfolge der Vorgabe = Reihenfolge der Segmente) */
  --color-users: #fcd1f6;
  --color-business: #f0a4bb;
  --color-tech: #ef8b8d;
  --color-market: #efab8b;
  --color-constraints: #f9d69b;

  /* Sequenz B: Produktvision und fünf Leistungen (Reihenfolge wie im Ring ab oben) */
  --color-vision: #afecfa;
  --color-strategy: #81c6e8;
  --color-discovery: #7aadd7;
  --color-design: #6aacf1;
  --color-agile: #57b2ea;
  --color-metrics: #44a7e5;

  /* Schluss */
  --color-glow: #ffffff;

  /* Projektkarten */
  --color-streetpool: #e7fcff;
  --color-locloy: #fff2f2;

  /* ---------- Schrift ---------- */
  --font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-light: 300;
  --weight-medium: 500;

  --type-h2-size: 40px;          /* Überschrift, Stage-Claim, Segmente, Beschriftungen */
  --type-h2-line: 48px;
  --type-stage-list-size: 16px;  /* Liste in Sequenz A */
  --type-stage-list-line: 20px;
  --type-stage-label-size: 40px; /* Kreis-Beschriftungen in A und B */
  --type-stage-label-line: 48px;
  --type-ui-size: 16px;          /* Switch, Footer-Links */
  --type-meta-size: 14px;        /* Statuszeilen, „Überspringen“ */
  --type-meta-line: 20px;

  /* ---------- Raster und Rahmen ---------- */
  --page-margin: clamp(32px, 8.333vw, 120px);  /* 1/12 der Viewportbreite */
  --content-max: 1200px;
  /* Abstand Viewport-Rand → Inhalt: Seitenrand, ab 1440 px zentriert */
  --content-inset: max(var(--page-margin), calc((100vw - var(--content-max)) / 2));
  --content-width: calc(100vw - 2 * var(--content-inset));

  --header-space: 44px;          /* Weißraum über dem Logo = Weißraum unter dem Logo */
  --logo-small-h: 32px;          /* Höhe kleines Logo */
  --logo-ratio: 4.503;           /* Breite / Höhe, aus dem SVG */
  --switch-segment-w: 36px;
  --switch-h: 24px;

  /* Stage-Oberkante = 2 × Weißraum + Logo-Höhe (Desktop 120) */
  --stage-top: calc(2 * var(--header-space) + var(--logo-small-h));
  --stage-bottom: 80px;

  --radius: 4px;

  /* ---------- Abstands-Rhythmus ---------- */
  --heading-gap: 24px;           /* Überschrift → Inhalt */
  --block-gap: 48px;             /* Block → Block */
  --section-gap: 96px;           /* Section → Section */
  --list-item-gap: 16px;         /* zwischen Listenpunkten in der Stage */
  --stage-inset: 24px;           /* Innenabstand für Elemente am Stage-Rand */
  --label-gap: 24px;             /* Kreiskante → Beschriftung */

  /* ---------- Über mich und Field work (Abschnitte 4 und 5 der Planung) ---------- */
  --gutter: 80px;                /* Spaltenabstand Text und Karten */
  --portrait-size: 208px;
  --type-intro-size: 24px;       /* About-Text, Medium (aus der Textbreite der Vorlage nachgemessen) */
  --type-intro-line: 28px;
  --type-lead-size: 24px;        /* Unterzeile unter „Field work“, Light */
  --type-lead-line: 32px;
  --card-padding: 32px;
  --card-logo-h: 49px;           /* Höhe der Logo-Zeile = höchstes Projektlogo (locloy mit Unterlänge) */

  /* ---------- Footer und Modals (Abschnitte 6 und 7 der Planung) ---------- */
  --footer-padding-y: 48px;
  --footer-link-gap: 40px;
  --modal-padding: 80px;         /* Innenabstand Inhalt = doppelter Abstand des Schließen-Buttons */
  --modal-close-inset: 40px;
  --modal-close-size: 48px;
  --tight-gap: 8px;              /* Überschrift → ihre Meta-Zeile */

  /* Text in Modals und Formularen */
  --type-body-size: 20px;        /* Fließtext Light */
  --type-body-line: 24px;
  --type-subhead-size: 20px;     /* Zwischenüberschrift Medium */
  --type-subhead-line: 24px;
  --type-button-size: 24px;      /* Get in touch, Senden (nachgemessen: 24, nicht 20) */
  --button-h: 56px;
  --button-pad-x: 24px;
  --field-h: 48px;               /* Eingabefeld */
  --line: 1px solid var(--color-ink);

  /* ---------- Infografik-Taktung ---------- */
  --stage-unit: 18;              /* Scroll-Strecke pro Zeiteinheit in svh (wird von JS gelesen) */
}

@media (max-width: 767px) {
  :root {
    --type-h2-size: 32px;
    --type-h2-line: 40px;
    --type-stage-list-size: 14px;
    --type-stage-list-line: 20px;
    --type-stage-label-size: 20px;
    --type-stage-label-line: 24px;

    --logo-small-h: 20px;       /* Stage-Oberkante damit 2 × 44 + 20 = 108 */
    --stage-bottom: 32px;

    --heading-gap: 16px;
    --block-gap: 32px;
    --section-gap: 64px;
    --list-item-gap: 12px;
    --stage-inset: 16px;
    --label-gap: 12px;

    --gutter: 0px;
    --portrait-size: 160px;
    --type-intro-size: 20px;
    --type-intro-line: 28px;
    --type-lead-size: 20px;
    --type-lead-line: 28px;
    --card-padding: 24px;

    --footer-padding-y: 32px;
    --footer-link-gap: 24px;
    --modal-padding: 32px;
    --modal-close-inset: 16px;
    --type-body-size: 18px;
    --type-subhead-size: 18px;
    --type-button-size: 20px;
  }
}