/* =====================================================================
   saple — tokens.css (KANONISCH)
   Einzige Implementierungs-Quelle für Design-Tokens.
   Konsistent mit: 03-FARBEN · 04-TYPOGRAFIE · 06-WEB-UI (Stand 2026-07-12).

   Herkunfts-Konvention:
   - Werte OHNE Tag: live erfasste Clay-Messwerte („Loam", 2026-07-12)
     bzw. Notion-Rohdaten (dann im Kommentar benannt).
   - Werte mit [abgeleitet]: begründete Setzungen, keine Messwerte.

   Pipeline-Farbcode (verbindlich, 03-FARBEN — Zuordnung [abgeleitet],
   Hex exakt Clay). Kanonische Schrittnamen: Aufnehmen / Crawlen /
   Schneiden / Versenden — UI-Labels dürfen abweichen, Chip-Farben nie:
     Aufnehmen = #EEF773 · Crawlen = #BEDFFE ·
     Schneiden = #F8B9E4 · Versenden = #FCC9AB
   ===================================================================== */

:root {
  /* ── Farben · Neutrale (Papier-Skala) ─────────────────────────── */
  --saple-papier:        #F4F3F0;  /* Canvas / Seitenhintergrund */
  --saple-milch:         #FEFDFB;  /* Karten & Panels auf Papier */
  --saple-weiss:         #FFFFFF;  /* Modals, Inputs; Text auf Tinte — nie Seitenhintergrund */
  --saple-leinen:        #F3F2ED;  /* Secondary-Fill, Hover-Fläche, Tabellen-Header */
  --saple-linie:         #D1CDC7;  /* Standard-Border / Divider */
  --saple-sand:          #DAD4C8;  /* dunklere Border-Variante */
  --saple-stein-1:       #7B7974;  /* Muted hell — nur Meta/groß */
  --saple-stein-2:       #79756D;  /* Muted mittel — Labels, Eyebrows */
  --saple-stein-3:       #55534E;  /* Muted dunkel — Fließtext-Minimum (6,9:1 auf Papier) */
  --saple-kohle:         #302F2C;  /* Icons, sekundäre UI */
  --saple-tinte:         #1D1C1A;  /* „Schwarz" für Flächen (Footer, Ink-Panels) */
  --saple-schwarz:       #000000;  /* Text + Primary-Button — nie als große Fläche */

  /* ── Farben · Akzente ─────────────────────────────────────────── */
  --saple-limette:       #CBD810;  /* Primary-CTA — genau 1× pro View; Text darauf immer schwarz */
  --saple-beere:         #3859F9;  /* Interaktion & Auswahl (Studio) [Rollen-Zuordnung abgeleitet] */
  --saple-himmel:        #038FF7;  /* Crawlen/Web — nur Grafik, Icons, große Zahlen */
  --saple-himmel-tief:   #0073E6;  /* Textlinks, kleine Blau-Elemente */
  --saple-drachenfrucht: #CC089E;  /* KI-Momente & Schnitt — nie CTA, nie Fehlerfarbe */
  --saple-zitrone:       #FCBE11;  /* Hinweise & Kontingent — Text darauf schwarz */
  --saple-zitrone-hell:  #F8D47A;  /* sanfte Highlight-Flächen */

  /* ── Farben · Pastell-Chips (Pipeline) ────────────────────────── */
  --saple-chip-aufnehmen: #EEF773;
  --saple-chip-crawlen:   #BEDFFE;
  --saple-chip-schneiden: #F8B9E4;
  --saple-chip-versenden: #FCC9AB;

  /* ── Farben · Inset-Ringe (2px: box-shadow: inset 0 0 0 2px …) ── */
  --saple-ring-aufnehmen: #FCFEE2;
  --saple-ring-crawlen:   #F0F8FF;
  --saple-ring-schneiden: #FFF0FA;
  --saple-ring-versenden: #FFF3ED;

  /* ── Farben · Deep-Text auf Chips ─────────────────────────────── */
  --saple-tief-navy:     #001433;  /* auf Blau-Chip (Crawlen) */
  --saple-tief-braun:    #381005;  /* auf Peach-Chip (Versenden) */
  /* Lime- & Pink-Chip (Aufnehmen, Schneiden): --saple-schwarz  [abgeleitet —
     keine Clay-Deep-Töne vorhanden; systemweit vereinheitlicht, 03-FARBEN §3.4] */

  /* ── Farben · Fehler & Erfolg ─────────────────────────────────── */
  --saple-fehler:        #F64932;  /* Notion-Rot — Hex aus Notion-Rohdaten; Übernahme als
                                      Fehlerfarbe ist Entscheidung [abgeleitet]. Icons/Borders/
                                      Badges; auf Weiß nur 3,5:1 → kein kleiner Text */
  --saple-fehler-text:   #C22011;  /* [abgeleitet] — Fehlertexte, 5,4:1 auf Papier (AA) */
  --saple-erfolg:        #4A5208;  /* [abgeleitet] — abgedunkelte Limette; Success-Text/-Icons,
                                      7,6:1 auf Papier; keine eigene Success-Fläche */

  /* ── Interaktionszustände [abgeleitet] ────────────────────────── */
  --saple-hover-cta:       #C1CD0F;  /* [abgeleitet] Limette ~5 % dunkler */
  --saple-hover-flaeche:   #E7E6E1;  /* [abgeleitet] Leinen ~5 % dunkler */
  --saple-hover-schwarz:   #302F2C;  /* [abgeleitet] schwarzer Button → Kohle */
  --saple-disabled-fill:   #F3F2ED;  /* [abgeleitet] */
  --saple-disabled-text:   #7B7974;  /* [abgeleitet] */
  --saple-disabled-border: #D1CDC7;  /* [abgeleitet] */
  --saple-focus-hell:      #000000;  /* [abgeleitet] focus-visible auf hellen Flächen:
                                        2px Outline, 2px Offset — nie Lime */
  --saple-focus-dunkel:    #F4F3F0;  /* [abgeleitet] focus-visible auf Tinte/Footer */

  /* ── Radius (Werte exakt Clay; Rollen-Zuordnung: 06-WEB §2.0.
        48px existiert in den Rohdaten, bleibt bei saple ungenutzt) ── */
  --radius-input:  8px;     /* Inputs, kleine Badges, kleine Screenshots */
  --radius-button: 12px;    /* Buttons, Panels, Stat-Chips, Screenshots in Karten */
  --radius-cta-l:  16px;    /* Primary L (große CTAs) */
  --radius-karte:  18px;    /* Karten, Pastell-Chip-Karten */
  --radius-media:  24px;    /* große Medien (Hero-Video) */
  --radius-pill:   1600px;  /* Pills (z. B. „Beliebt"-Badge) */

  /* ── Spacing [abgeleitet von Clay-Gaps 40/24/8 — diese drei belegt,
        übrige Stufen abgeleitet] ──────────────────────────────────── */
  --space-8:   8px;
  --space-16:  16px;   /* [abgeleitet] */
  --space-24:  24px;
  --space-40:  40px;
  --space-64:  64px;   /* [abgeleitet] — Sektions-Padding Mobile */
  --space-96:  96px;   /* [abgeleitet] — Sektions-Padding Desktop */
  --space-128: 128px;  /* [abgeleitet] — Sektions-Padding Desktop groß */

  /* ── Layout ───────────────────────────────────────────────────── */
  --container-max: 1200px;  /* [abgeleitet] */
  --gutter:        24px;    /* [abgeleitet] */
  --nav-hoehe:     64px;    /* [abgeleitet] */

  /* ── Typografie · Familien (Lizenzen vorhanden; fonts.css VOR dieser
        Datei laden). System-Kette = reine FOUT-Absicherung. ──────── */
  --font-sans: "Roobert", -apple-system, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Canela", Georgia, "Times New Roman", serif;
  --font-mono: "Roobert Mono", ui-monospace, "SF Mono", "Cascadia Mono",
               Consolas, monospace;
  /* Eyebrows laufen in --font-sans — bewusste Abweichung von Clay
     (Clay: Secondary-Font). Dokumentiert in 04-TYPOGRAFIE §3. */

  /* ── Typografie · Größen ──────────────────────────────────────── */
  --text-h1:       3.75rem;    /* 60px */
  --text-h2:       2.75rem;    /* 44px */
  --text-h3:       2rem;       /* 32px */
  --text-h4:       1.5rem;     /* 24px */
  --text-lead:     1.25rem;    /* [abgeleitet — Notion-Lead 20px; Clay hat keine Lead-Ebene] */
  --text-body:     1rem;       /* 16px */
  --text-small:    0.9rem;     /* [abgeleitet — Ebene ohne Rohdaten-Beleg] */
  --text-eyebrow:  0.8125rem;  /* 13px [abgeleitet — Setzung zwischen Clay-Messwerten
                                  Nav 12.8px und Button 13.92px; systemweit, 04 §3] */
  --text-button:   0.875rem;   /* 14px [abgeleitet aus Clay-Messung 13.92px] */
  --text-button-l: 1.125rem;   /* 18px [abgeleitet — Primary L] */
  --text-mono:     0.8125rem;  /* 13px [abgeleitet]; kleine Mono-Labels 12px [abgeleitet] */

  /* ── Typografie · Line-Heights ────────────────────────────────── */
  --leading-h1:      1.0;
  --leading-h2:      1.1;
  --leading-h3:      1.1;
  --leading-h4:      1.2;
  --leading-lead:    1.4;   /* [abgeleitet] */
  --leading-body:    1.5;
  --leading-eyebrow: 1.2;
  --leading-button:  1;

  /* ── Typografie · Weights (Variable-Achse) ────────────────────── */
  --weight-display: 575;  /* NUR H1 — gilt ausdrücklich nicht für Preise,
                             Stat-Zahlen, H2 (Entscheidung, 04 §4) */
  --weight-heading: 500;  /* H2 belegt; H3/H4 [abgeleitet] */
  --weight-body:    400;
  --weight-max:     600;  /* harte Obergrenze; 575-Fallback: 600, nie 700 */

  /* ── Typografie · Tracking ────────────────────────────────────── */
  --tracking-h1:      -0.04em;
  --tracking-h2:      -0.03em;
  --tracking-h3:      -0.02em;  /* [abgeleitet] */
  --tracking-body:     0;
  --tracking-eyebrow:  0.08em;  /* [abgeleitet — Rohdaten belegen für Eyebrows
                                   nur Secondary-Font/500/1.2; CAPS ebenfalls abgeleitet] */

  /* ── Motion [abgeleitet — keine Motion-Werte in den Rohdaten] ─── */
  --motion-hover:  150ms;  /* [abgeleitet] */
  --motion-state:  200ms;  /* [abgeleitet] */
  --motion-reveal: 250ms;  /* [abgeleitet] */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);  /* [abgeleitet] */

  /* ── Semantische Aliase ───────────────────────────────────────── */
  --saple-bg:             var(--saple-papier);
  --saple-bg-karte:       var(--saple-milch);
  --saple-fill-sekundaer: var(--saple-leinen);
  --saple-border:         var(--saple-linie);
  --saple-text:           var(--saple-schwarz);
  --saple-text-muted:     var(--saple-stein-3);
  --saple-flaeche-dunkel: var(--saple-tinte);
  --saple-cta:            var(--saple-limette);
  --saple-cta-text:       var(--saple-schwarz);
}

/* ── Breakpoints [abgeleitet — Rohdaten enthalten keine Breakpoints].
      Custom Properties funktionieren nicht in Media Queries, daher als
      dokumentierte Konvention (identisch in 06-WEB §2.0):

      sm = 640px   → darunter Mobile: Burger-Nav, Sektions-Padding 64px,
                     einspaltige Grids
      md = 1024px  → ab hier Desktop: Sektions-Padding 96–128px,
                     mehrspaltige Grids
      lg = 1248px  → Container erreicht max-width 1200px + 2×24px Gutter

      Beispiel:
      @media (min-width: 1024px) { .sektion { padding-block: var(--space-96); } }
   ───────────────────────────────────────────────────────────────── */