/* ==========================================================================
   PIONEERS PARTNERS — Design Tokens
   Source: Brand assets (Logo_Pioneers-Partners_Blau.svg) + pioneers-partners.com
   Primary blue confirmed: #0069B4 ("kräftiges Blau")
   ========================================================================== */

:root {
  /* -- BRAND COLORS -------------------------------------------------------- */
  --pp-blue:          #0069B4;  /* Primary — from logo SVG */
  --pp-blue-900:      #003A63;  /* Deep blue — headlines on light, dark sections */
  --pp-blue-700:      #00528F;  /* Hover / pressed */
  --pp-blue-500:      #0069B4;  /* = --pp-blue (token alias) */
  --pp-blue-300:      #4B9BD4;  /* Illustrative accents, chart mid */
  --pp-blue-100:      #D6E8F4;  /* Subtle fills, section tints */
  --pp-blue-050:      #EEF5FB;  /* Page tint, card base */

  /* Neutrals — warm-cool slate, matches the restrained, consultative tone */
  --pp-ink:           #0E1726;  /* Body text */
  --pp-ink-700:       #243247;  /* Secondary text */
  --pp-ink-500:       #5A6B82;  /* Meta, captions */
  --pp-ink-300:       #98A6BA;  /* Disabled, subtle labels */
  --pp-line:          #DCE3EC;  /* Dividers, borders */
  --pp-surface:       #F5F7FA;  /* Canvas */
  --pp-surface-alt:   #FFFFFF;  /* Card */
  --pp-white:         #FFFFFF;

  /* Accents — used sparingly. Signal, not decoration. */
  --pp-orange:        #E8944A;  /* Secondary brand accent (Josefin-Sans-Probe aus Guide) */
  --pp-orange-500:    #E8944A;
  --pp-orange-100:    #FBE6D0;  /* Tint, subtle highlight */
  --pp-signal:        #D64545;  /* "Muster sichtbar machen" — only for critical */
  --pp-success:       #1F8A5C;  /* KPI positive, measurable progress */
  --pp-gold:          #C89A3C;  /* Alternate warm accent */

  /* -- TYPOGRAPHY ---------------------------------------------------------- */
  /* Per Brand Guideline (Page 05):
     Primary Font — Open Sans (any text, bold + italic OK)
     Secondary Font — Josefin Sans (bold for headings, page numbers)         */
  --pp-font-display:  "Josefin Sans", "Futura", "Helvetica Neue", Arial, sans-serif;
  --pp-font-sans:     "Open Sans", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pp-font-mono:     "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale — 1.250 Major Third, optimized for B2B readability */
  --pp-fs-xs:   12px;
  --pp-fs-sm:   14px;
  --pp-fs-base: 16px;
  --pp-fs-md:   18px;
  --pp-fs-lg:   22px;
  --pp-fs-xl:   28px;
  --pp-fs-2xl:  36px;
  --pp-fs-3xl:  46px;
  --pp-fs-4xl:  60px;
  --pp-fs-5xl:  78px;

  --pp-lh-tight: 1.1;
  --pp-lh-snug:  1.25;
  --pp-lh-base:  1.55;
  --pp-lh-loose: 1.7;

  --pp-tracking-tight:  -0.02em;
  --pp-tracking-normal: 0;
  --pp-tracking-wide:    0.08em;
  --pp-tracking-caps:    0.14em;

  /* -- SPACING (4pt base) -------------------------------------------------- */
  --pp-space-1:   4px;
  --pp-space-2:   8px;
  --pp-space-3:  12px;
  --pp-space-4:  16px;
  --pp-space-5:  24px;
  --pp-space-6:  32px;
  --pp-space-7:  48px;
  --pp-space-8:  64px;
  --pp-space-9:  96px;
  --pp-space-10:128px;

  /* -- RADII --------------------------------------------------------------- */
  --pp-radius-sm:  4px;
  --pp-radius-md:  8px;
  --pp-radius-lg: 14px;
  --pp-radius-xl: 22px;
  --pp-radius-pill: 999px;

  /* -- SHADOWS ------------------------------------------------------------- */
  --pp-shadow-1: 0 1px 2px rgba(14, 23, 38, 0.06), 0 1px 1px rgba(14, 23, 38, 0.04);
  --pp-shadow-2: 0 6px 16px -4px rgba(14, 23, 38, 0.10), 0 2px 4px rgba(14, 23, 38, 0.04);
  --pp-shadow-3: 0 18px 40px -12px rgba(0, 105, 180, 0.22), 0 4px 10px rgba(14, 23, 38, 0.06);
  --pp-shadow-focus: 0 0 0 3px rgba(0, 105, 180, 0.28);

  /* -- MOTION -------------------------------------------------------------- */
  --pp-ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --pp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pp-dur-fast: 140ms;
  --pp-dur-med:  240ms;
  --pp-dur-slow: 420ms;

  /* -- LAYOUT -------------------------------------------------------------- */
  --pp-container: 1200px;
  --pp-container-wide: 1440px;
  --pp-gutter: clamp(20px, 4vw, 56px);
}

/* Base typography reset used across design-system demo pages */
.pp-body {
  font-family: var(--pp-font-sans);
  font-size: var(--pp-fs-base);
  line-height: var(--pp-lh-base);
  color: var(--pp-ink);
  background: var(--pp-surface);
  -webkit-font-smoothing: antialiased;
}
.pp-display { font-family: var(--pp-font-display); letter-spacing: var(--pp-tracking-tight); line-height: var(--pp-lh-tight); }
.pp-eyebrow { font-family: var(--pp-font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: var(--pp-tracking-caps); font-size: var(--pp-fs-xs); color: var(--pp-blue); }