/* PRO Technologies · Design-Tokens
   Eine Quelle für Website, Produkte und Vorlagen. Werte nicht kopieren, sondern diese Datei einbinden.
   Stand: 2026-09 · Dokumentation: 01_Brand/Markenhandbuch.html */

:root {
  /* Farbe: zwei Tinten */
  --pro-blau: #00166c; /* Primärfarbe, identisch mit dem PRO-Zeichen */
  --pro-nachtblau: #000b45; /* gedrückte Zustände und Tiefe auf Blau */
  --pro-weiss: #ffffff; /* Schildweiß */

  /* Farbe: Eloxal (kühle, leicht blaustichige Grautöne) */
  --pro-eloxal: #eef1f6; /* Seitengrund */
  --pro-eloxal-tief: #e2e6ef; /* abgesetzte Flächen auf dem Grund */
  --pro-linie: #d5dae6; /* Haarlinien auf Hell */
  --pro-linie-auf-blau: #2e4189; /* Haarlinien auf Blau (entspricht Weiß 18 %) */
  --pro-linie-feld-auf-blau: #5a6bb0; /* Rahmen von Eingabefeldern auf Blau, 3,4:1 zur Fläche */
  --pro-weiss-aktiv: #dfe5ff; /* heller Knopf beim Überfahren */

  /* Farbe: Text */
  --pro-text: var(--pro-blau);
  --pro-text-leise: #4a5890; /* Sekundärtext auf Hell, 6,8:1 auf Weiß */
  --pro-text-auf-blau: var(--pro-weiss);
  --pro-text-leise-auf-blau: #b9c4f5; /* Sekundärtext auf Blau, 9,2:1 */
  --pro-text-hinweis-auf-blau: #9aa8e2; /* Platzhaltertext in Eingabefeldern auf Blau */

  /* Farbe: Signal – nur für Fokus, Aktion und die eine markierte Stelle */
  --pro-signal: #2447f9;
  --pro-signal-auf-blau: #b9c4f5;

  /* Farbe: Zustand – nur in Oberflächen, nie als Markenfarbe */
  --pro-betrieb: #0b7f45;
  --pro-hinweis: #9a5b00;
  --pro-stoerung: #c62a1f;
  --pro-betrieb-auf-blau: #5be39b;
  --pro-stoerung-auf-blau: #ff9c8f;

  /* Schrift */
  --pro-schrift: 'Sofia Sans', 'PRO Ersatz', 'Helvetica Neue', Arial, sans-serif;
  --pro-schrift-schmal: 'Sofia Sans Condensed', 'Sofia Sans', 'Arial Narrow', sans-serif;
  --pro-schrift-gravur: 'PRO Gravur', 'Sofia Sans Condensed', 'Arial Narrow', sans-serif;

  /* Schriftgrade (fließend zwischen 360 und 1440 px Breite) */
  --pro-grad-display: clamp(2.625rem, 1.2rem + 4.2vw, 5.25rem);
  --pro-grad-h2: clamp(2rem, 1.5rem + 2.2vw, 3.375rem);
  --pro-grad-h3: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);
  --pro-grad-lead: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --pro-grad-text: 1.1875rem;
  --pro-grad-klein: 1rem;
  --pro-grad-gravur: 0.8125rem; /* Feldbezeichnungen in PRO Gravur, immer Versalien */

  --pro-zeile-eng: 1.04;
  --pro-zeile-titel: 1.2;
  --pro-zeile-text: 1.55;
  --pro-laufweite-display: -0.025em;
  --pro-laufweite-gravur: 0.09em;

  /* Maß: 1 Strich = 8 px. Abstände zwischen Bausteinen sind Vielfache davon. */
  --pro-strich: 0.5rem;
  --pro-abstand-1: calc(var(--pro-strich) * 1); /* 8 */
  --pro-abstand-2: calc(var(--pro-strich) * 2); /* 16 */
  --pro-abstand-3: calc(var(--pro-strich) * 3); /* 24 */
  --pro-abstand-4: calc(var(--pro-strich) * 4); /* 32 */
  --pro-abstand-6: calc(var(--pro-strich) * 6); /* 48 */
  --pro-abstand-8: calc(var(--pro-strich) * 8); /* 64 */
  --pro-abstand-12: calc(var(--pro-strich) * 12); /* 96 */
  --pro-abstand-16: calc(var(--pro-strich) * 16); /* 128 */

  /* Form */
  --pro-radius-platte: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem); /* Platten */
  --pro-radius-feld: 0.625rem; /* Eingabefelder, kleine Schilder */
  --pro-radius-pille: 999px; /* Schaltflächen, Plaketten */
  --pro-haarlinie: 1px;
  --pro-bohrung: 0.625rem; /* Durchmesser der Montagebohrungen */

  /* Bewegung */
  --pro-kurve: cubic-bezier(0.16, 1, 0.3, 1); /* exponentielles Ausklingen */
  --pro-dauer-kurz: 160ms;
  --pro-dauer-mittel: 360ms;
  --pro-dauer-lang: 900ms;
}