/* Sprudel Design System — Tokens
   Quelle: 01-Grundlagen/Farbe & Typografie.dc.html (Foundations V2)
   Diese Datei ist die einzige Stelle, an der Werte geändert werden. */

:root {
  /* Primär · Quelle — sechs Töne, je eine Aufgabe */
  --sp-primary-50:  #EDF9FB;  /* Tint: ausgewählte Zeile, Chip-Grund */
  --sp-primary-100: #D3F0F5;  /* Fläche: Hinweisbox, Hover auf Tint */
  --sp-primary-300: #6FCBDC;  /* Signal: Fokusring, Bubbles, Wasser. Kein Text */
  --sp-primary-600: #0C7590;  /* Aktion: Buttons, aktiver Tab — 5,1:1 */
  --sp-primary-600-rgb: 12,117,144; /* = --sp-primary-600, für rgba()-Ableitungen */
  --sp-primary-700: #0B5E75;  /* Text: Links, farbiger Text, Hover — 7,2:1 */
  --sp-primary-900: #0E3F4E;  /* Tiefe: Wortmarken-Fläche, Fuß — 11,3:1 */

  /* Neutrale · kühl getönt */
  --sp-ink:     #0C1A1F;  /* 17,7:1 */
  --sp-ink-2:   #33474D;  /*  9,8:1 */
  --sp-ink-3:   #5E7076;  /*  5,1:1 — Untergrenze, nur Sekundäres, nur auf Weiß */
  --sp-line:    #DCE4E6;
  --sp-surface: #F1F5F6;
  --sp-paper:   #F7FAFA;
  --sp-white:   #FFFFFF;

  /* Projektstatus — Pin, Text, Fläche */
  --sp-status-planned-pin:   #6B5BD6;
  --sp-status-planned-text:  #4F3FB0;
  --sp-status-planned-tint:  #EFEDFC;
  --sp-status-open-pin:      #C77C08;
  --sp-status-open-text:     #8A5A05;
  --sp-status-open-tint:     #FDF3E2;
  --sp-status-building-pin:  #C4462A;
  --sp-status-building-text: #A63A22;
  --sp-status-building-tint: #FBEDE9;
  --sp-status-done-pin:      #1F7A52;
  --sp-status-done-text:     #1A6645;
  --sp-status-done-tint:     #E7F4EC;

  /* Signal — Live-/Aktivitätsanzeige (z. B. Puls-Punkt „gerade aktiv"). Kein Projektstatus. */
  --sp-signal-live: #4ade80;

  /* Schrift — zwei Familien */
  --sp-font-display: "Outfit", system-ui, sans-serif;  /* nur 900 */
  --sp-font-text:    "Figtree", system-ui, sans-serif; /* 400 500 600 700 */

  /* Sechs Textstufen. Mehr gibt es nicht.
     1 Wortmarke · 2 Hero · 3 Überschrift · 4 Titel · 5 Text · 6 Klein */
  --sp-text-1-size: 64px;  --sp-text-1-lh: 1;     --sp-text-1-ls: -0.04em;  --sp-text-1-weight: 900;
  --sp-text-2-size: 56px;  --sp-text-2-lh: 1;     --sp-text-2-ls: -0.035em; --sp-text-2-weight: 900;
  --sp-text-3-size: 32px;  --sp-text-3-lh: 1.2;   --sp-text-3-ls: -0.015em; --sp-text-3-weight: 700;
  --sp-text-4-size: 24px;  --sp-text-4-lh: 1.3;   --sp-text-4-ls: -0.01em;  --sp-text-4-weight: 700;
  --sp-text-5-size: 18px;  --sp-text-5-lh: 1.6;   --sp-text-5-weight: 400;
  --sp-text-5-easy-size: 20px; --sp-text-5-easy-lh: 1.65; /* leichte Sprache */
  --sp-text-6-size: 15px;  --sp-text-6-lh: 1.55;  --sp-text-6-weight: 500;
  --sp-label-size: 13px;   --sp-label-ls: 0.1em;  --sp-label-weight: 600; /* Versalien, Auszeichnung */

  /* Abstände — innerhalb einer Komponente höchstens drei Werte */
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 24px;
  --sp-space-6: 32px;
  --sp-space-7: 48px;
  --sp-space-8: 64px;

  /* Layout — drei Breiten, Satzspiegel, Ränder
     Quelle: 01-Grundlagen/Layout & Raster.dc.html */
  --sp-bp-mittel: 720px;
  --sp-bp-gross: 1080px;
  --sp-page-max: 1080px;   /* Textseiten; Kartenseiten haben kein Maximum */
  --sp-read-max: 640px;    /* Lesespalte, ca. 55 Zeichen bei 18px */
  --sp-gutter-klein: 16px;
  --sp-gutter-mittel: 24px;
  --sp-gutter-gross: 32px;
  --sp-gutter-map: 20px;   /* Abstand schwebender Inseln auf Kartenseiten */
  --sp-grid-gap: 20px;
  --sp-grid-min: 260px;    /* Mindestbreite im umbrechenden Raster */
  --sp-rhythm-in: 24px;    /* innerhalb einer Gruppe */
  --sp-rhythm-group: 48px; /* zwischen Gruppen */
  --sp-rhythm-section: 96px; /* zwischen Abschnitten */

  /* Radien */
  --sp-radius-input: 8px;
  --sp-radius-button: 14px;
  --sp-radius-surface: 20px;
  --sp-radius-card: 28px;
  --sp-radius-pill: 999px;

  /* Schatten — nur zwei Stufen */
  --sp-shadow-1: 0 4px 12px -6px rgba(12, 26, 31, 0.18);  /* liegt auf der Fläche */
  --sp-shadow-2: 0 12px 32px -16px rgba(12, 26, 31, 0.22); /* liegt über der Landkarte */

  /* Bedienelemente — Höhen, nicht Schriftgrößen */
  --sp-control-lg: 56px;
  --sp-control-md: 48px;
  --sp-control-sm: 44px;  /* Untergrenze, auch auf dem Desktop */
  --sp-focus-ring: 3px solid var(--sp-primary-300);
  --sp-focus-offset: 3px;

  /* Bubbles — Größen verdoppeln, drei Deckkraftstufen */
  --sp-bubble-1: 8px;
  --sp-bubble-2: 16px;
  --sp-bubble-3: 32px;
  --sp-bubble-4: 64px;
  --sp-bubble-5: 128px;
  --sp-bubble-6: 256px;
  --sp-bubble-opacity-lg: 0.22; /* die größten Flächen */
  --sp-bubble-opacity-md: 0.34;
  --sp-bubble-opacity-sm: 0.40; /* die kleinen */

  /* Bewegung — nichts unter einer Sekunde, kein Rückschwung */
  --sp-motion-wait: 6s;           /* aufsteigend, endlos */
  --sp-motion-success: 2700ms;    /* aus dem Button aufsteigen */
  --sp-motion-success-stagger: 170ms;
  --sp-motion-cover: 900ms;       /* Seitenwechsel: abdecken */
  --sp-motion-reveal: 700ms;      /* Seitenwechsel: auflösen */
  --sp-motion-ease: cubic-bezier(0.32, 0.06, 0.4, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sp-motion-wait: 0ms;
    --sp-motion-success: 0ms;
    --sp-motion-success-stagger: 0ms;
    --sp-motion-cover: 0ms;
    --sp-motion-reveal: 0ms;
  }
}