/* ==========================================================================
   Am Puls — Design-Tokens
   Übernommen 1:1 aus dem Design-System
   (Handoff Website/site/_ds/am-puls-design-system-…/tokens/*.css).
   Werte hier ändern, nicht in site.css. Keine weiteren Farben erfinden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften
   Geomanist: selbst gehostet aus assets/fonts (300/350/400/500/700 + Kursiv).
   Geomanist endet bei Bold (700) — wo 800 gefordert ist, fällt der Browser
   innerhalb Geomanist auf 700 zurück. Das ist laut CD-Book korrekt.

   >>> DSGVO-TODO: JetBrains Mono kommt aktuell vom Google-Fonts-CDN.
   Das ist eine Drittland-Übermittlung und muss im Datenschutztext stehen —
   oder die Schrift wird selbst gehostet. Zum Umstellen:
     1. JetBrains Mono woff2 nach assets/fonts/ legen
     2. Die @import-Zeile unten löschen
     3. @font-face-Blöcke wie bei Geomanist ergänzen
   Genau diese eine Zeile ist die einzige externe Anfrage der ganzen Website.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

@font-face{font-family:'Geomanist';src:url('../fonts/Geomanist-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Geomanist';src:url('../fonts/Geomanist-Light-Italic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Geomanist';src:url('../fonts/Geomanist-Book.woff2') format('woff2');font-weight:350;font-style:normal;font-display:swap}
@font-face{font-family:'Geomanist';src:url('../fonts/Geomanist-Book-Italic.woff2') format('woff2');font-weight:350;font-style:italic;font-display:swap}
@font-face{font-family:'Geomanist';src:url('../fonts/Geomanist-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geomanist';src:url('../fonts/Geomanist-Regular-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Geomanist';src:url('../fonts/Geomanist-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Geomanist';src:url('../fonts/Geomanist-Medium-Italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Geomanist';src:url('../fonts/Geomanist-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Geomanist';src:url('../fonts/Geomanist-Bold-Italic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}

:root{
  /* ---- Farben: Basis-Palette (in Komponenten NICHT direkt verwenden) ---- */
  --ap-black:      #0A0A0A;   /* Seitenhintergrund, Textfarbe im Marker */
  --ap-navy:       #1C2A3C;
  --ap-navy-deep:  #131C29;
  --ap-navy-3:     #223347;
  --ap-card:       #121824;
  --ap-card-2:     #1A2230;
  --ap-card-3:     #243044;

  --ap-accent:      #6F9E97;  /* Sage — der EINE Akzent */
  --ap-accent-hi:   #83B0A9;
  --ap-accent-soft: rgba(111,158,151,0.14);
  --ap-accent-grid: rgba(111,158,151,0.09);
  --ap-accent-glow: rgba(111,158,151,0.20);

  --ap-white:       #FFFFFF;
  --ap-muted:       #8A98AB;

  --ap-alert:       #E06262;  /* nur Risiko / Krise / Recht */
  --ap-alert-soft:  rgba(224,98,98,0.14);

  --ap-border:      rgba(255,255,255,0.08);
  --ap-border-hi:   rgba(255,255,255,0.14);

  /* ---- Farben: semantische Aliase (diese verwenden) ---- */
  --bg:              var(--ap-black);
  --surface:         var(--ap-navy-deep);
  --surface-raised:  var(--ap-navy);
  --surface-card:    var(--ap-card);
  --surface-card-2:  var(--ap-card-2);
  --surface-card-3:  var(--ap-card-3);

  --accent:          var(--ap-accent);
  --accent-hover:    var(--ap-accent-hi);
  --accent-soft:     var(--ap-accent-soft);

  --text-strong:     var(--ap-white);
  --text-body:       var(--ap-white);
  --text-muted:      var(--ap-muted);
  --text-on-accent:  var(--ap-black);

  --border:          var(--ap-border);
  --border-hi:       var(--ap-border-hi);

  --alert:           var(--ap-alert);
  --alert-soft:      var(--ap-alert-soft);

  /* Bewertungssterne.
     Bewusste Ausnahme von der Regel „ein Akzent, sonst keine Farben": Gold
     ist bei Bewertungen die erwartete Konvention und wird sofort verstanden.
     Wer lieber im CI bleiben will, setzt hier var(--accent) ein — die
     Sterne werden dann sage. Das ist die einzige Stelle dafür. */
  --star:            #F2B441;

  /* ---- Typografie ---- */
  --font-sans: "Geomanist","Poppins","Inter",-apple-system,"SF Pro Display",ui-sans-serif,system-ui,sans-serif;
  --font-mono: "JetBrains Mono","Space Mono","Consolas",ui-monospace,monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  --tracking-tight:   -0.01em;
  --tracking-mono:     0.22em;
  --tracking-kicker:   0.3em;

  /* ---- Abstände: 4px-Raster ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:56px;
  --sp-11:64px; --sp-12:80px; --sp-13:96px; --sp-14:128px;

  --container-narrow: 760px;
  --container-normal: 1120px;
  --container-wide:   1360px;

  /* Seitenpadding und Sektionsrhythmus der Website */
  --page-pad:      clamp(20px, 4vw, 40px);
  --section-pad:   clamp(56px, 8vw, 100px);
  --section-pad-lg:clamp(64px, 9vw, 120px);
  --hero-pad-top:  clamp(80px, 10vw, 140px);

  /* ---- Effekte ---- */
  --radius-1: 4px;   /* Marker, kleine Badges */
  --radius-2: 6px;   /* Buttons, Chips, Felder */
  --radius-3: 10px;  /* Karten, Panels */

  --shadow-card:    0 10px 30px rgba(0,0,0,0.35);
  --shadow-postit:  0 24px 60px rgba(0,0,0,0.5);
  --shadow-glow:    0 0 40px rgba(111,158,151,0.35);

  --focus-ring:     0 0 0 3px rgba(111,158,151,0.55);

  --ease:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;  /* micro */
  --dur-2: 200ms;  /* standard */
  --dur-3: 320ms;  /* settle */

  /* Signatur-Hintergründe */
  --bg-radial: radial-gradient(120% 70% at 50% 88%, var(--ap-accent-glow) 0%, transparent 60%),
               radial-gradient(120% 80% at 15% 12%, var(--ap-navy-deep) 0%, var(--bg) 62%);
  --bg-grid:   linear-gradient(var(--ap-accent-grid) 1px, transparent 1px),
               linear-gradient(90deg, var(--ap-accent-grid) 1px, transparent 1px);
  --bg-grid-size: 96px 96px;
}