/* ============================================================
   P/W Consulting GmbH — Design-Tokens
   Verbindliche Werte laut Build-Spezifikation Abschnitt 2.2/2.3.
   Diese Datei enthaelt ausschliesslich Variablen und Schriften —
   keine Komponenten. Farben bitte nirgends hart eintragen.
   ============================================================ */

/* --- Sora (lokal, kein CDN) ------------------------------- */
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora/Sora-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora/Sora-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora/Sora-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora/Sora-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora/Sora-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* --- Marke, dunkle Ebene --- */
  --pw-petrol:        #024946;
  --pw-petrol-900:    #013330;
  --pw-petrol-deep:   #012c29;
  --pw-petrol-500:    #0a5d58;

  /* --- Akzent --- */
  --pw-mint:          #00eba6;
  --pw-mint-ink:      #00b381;
  --pw-mint-600:      #00cf92;
  --pw-mint-tint:     #e8f9f3;

  /* --- helle Ebene --- */
  --pw-white:         #ffffff;
  --pw-surface:       #f6f8f7;
  --pw-surface-2:     #eef1f0;
  --pw-border:        #dfe6e4;
  --pw-border-strong: #cdd4d2;

  /* --- Text --- */
  --pw-ink:           #16211f;
  --pw-ink-soft:      #3c4644;
  --pw-ink-mid:       #5c6b68;
  --pw-muted:         #8a9794;
  --pw-on-dark-1:     #d7e9e5;
  --pw-on-dark-2:     #bfe6df;
  --pw-on-dark-3:     #9fc2bb;

  /* --- Schrift --- */
  --pw-font-display: 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pw-font-text:    'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* --- Kanten: bewusst eckig, kein Pill-Look --- */
  --pw-radius-kachel: 3px;
  --pw-radius-chip:   4px;
  --pw-linie-stark:   3px;

  /* Hoehe der schwebenden Navigation. js/navigation.js misst sie
     beim Laden nach und schreibt den echten Wert hierher — dieser
     Startwert verhindert nur ein Springen davor. */
  --pw-nav-hoehe: 69px;

  /* --- Raster --- */
  --pw-breite-inhalt: 1200px;
  --pw-rand:          clamp(20px, 4vw, 40px);
  --pw-abstand-sektion: clamp(56px, 7vw, 104px);

  /* --- Bewegung --- */
  --pw-dauer: 180ms;
  --pw-kurve: cubic-bezier(.2, .7, .3, 1);
}