/* ============================================================
   VERTICAL CONSULTING · Marken-Tokens
   Einzige Quelle für Farben, Rundungen, Schrift und Schatten –
   genutzt von der Website (inkl. AI-Portfolio) und Vertical Estimate.
   Wird beim Deploy automatisch in beide Seiten kopiert
   (scripts/build.mjs) – NUR HIER ändern.
   ============================================================ */

:root {
  /* ── Akzentfarbe ───────────────────────────────────────────
     Zwei Werte genügen: eine Farbe für Flächen, Markierungen und
     Hervorhebungen und eine dunkle Farbe für Text, Links und aktive
     Zustände (muss auf Weiß gut lesbar sein).
     Aktuell: Graphit #E7E7EC / #22222A (2026-10-09).
     Frühere Paare:  Lavendel  #DCD6FF / #4B3FB3
                     Salbei    #CDEBDD / #1E6B55
                     Pfirsich  #FFDCCB / #A3462A
                     Himmel    #D3E7FA / #1F5F8F                 */
  --accent: #E7E7EC;
  --accent-ink: #22222A;

  /* ── Logo (brand/logo.svg, Version „final final“ aus dem Logo-Editor) ──
     Feste Werte, weil der Build sie ins SVG schreibt. Graphit. */
  --logo-tile: #E7E7EC;
  --logo-start: #A9A9B5;
  --logo-mid: #666670;

  /* Abgeleitete Abstufungen – passen sich automatisch an */
  --accent-soft: color-mix(in oklab, var(--accent) 50%, #fff);
  --accent-tint: color-mix(in oklab, var(--accent) 22%, #fff);
  --accent-line: color-mix(in oklab, var(--accent) 75%, var(--accent-ink));
  --accent-ink-hover: color-mix(in oklab, var(--accent-ink) 82%, #000);
  --accent-glow: color-mix(in oklab, var(--accent) 65%, transparent);

  /* ── Neutrale Farben ── */
  --paper: #ffffff;
  --canvas: #fbfbfd;
  --ink: #17161d;
  --ink-soft: #2c2b34;
  --smoke: #6b6a76;
  --mist: #a2a1ac;
  --hairline: #e8e7ee;
  --sand: #f5f5f8;
  --sand-deep: #ebebf0;

  /* ── Status ── */
  --danger: #c93a3a;
  --danger-soft: #fcecec;
  --success: #2e7d5b;
  --success-soft: #e6f4ed;

  /* ── Diagramm-Palette (Grafiken im BI-Portfolio) ──
     Freundliche Pastelltöne: je Farbe eine Fläche und eine dunkle
     Variante für Linien und Text. Farbe 1 folgt dem Akzent.
     Bedeutung in GuV-Grafiken: 2 = Ergebnis/positiv, 3 = Aufwand/negativ. */
  --chart-1: var(--accent);
  --chart-1-ink: var(--accent-ink);
  --chart-2: #CDEBDD;
  --chart-2-ink: #1E6B55;   /* Salbei */
  --chart-3: #FFDCCB;
  --chart-3-ink: #A3462A;   /* Pfirsich */
  --chart-4: #D3E7FA;
  --chart-4-ink: #1F5F8F;   /* Himmel */
  --chart-5: #FCEBB6;
  --chart-5-ink: #7A5A0C;   /* Sonne */

  /* ── Form & Tiefe ── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(23, 22, 29, .05);
  --shadow: 0 1px 2px rgba(23, 22, 29, .04), 0 12px 32px -14px rgba(23, 22, 29, .16);
  --shadow-lg: 0 2px 4px rgba(23, 22, 29, .04), 0 24px 60px -24px rgba(23, 22, 29, .22);

  /* ── Schrift & Bewegung ── */
  --font: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}