/* Hubiqa: Design-Tokens der Website (Farbschema Graphit, Marke = Farbe der Krake).
   Krakenfarbe gemessen aus dem PNG (Median der gesättigten Körperpixel): #764BF7.
   Kontraste geprüft (WCAG 2.1 AA, jeweils ≥ 4.5:1):
   - Weiß auf Button #764BF7 ............ 5.10
   - Text-Akzent #6D45E3 auf Weiß ....... 5.82, auf #ECEFF2 ... 5.04
   - Hell-Akzent #A98FFF auf #20262D .... 5.86 (Linien, Haken, Wortmarke "iqa" auf dunkel)
   - Schrift #20262D auf Tönung #E4DBFF . 11.53; Sekundärtext #4D5763 auf #ECEFF2 ... 6.36 */

:root {
  /* Flächen: Graphit */
  --color-bg: #ECEFF2;
  --color-surface: #FFFFFF;
  --color-surface-dark: #20262D;
  --color-line: #D5DBE1;

  /* Text */
  --color-ink: #20262D;
  --color-muted: #4D5763;
  --color-on-dark: #FFFFFF;

  /* Marke = Krakenfarbe; Buttons in genau dieser Farbe */
  --color-brand: #764BF7;
  --color-brand-strong: #6D45E3;   /* Links und Text-Akzente auf hellem Grund */
  --color-brand-light: #A98FFF;    /* Akzente, Linien, Haken auf dunklem Grund */
  --color-tint: #E4DBFF;           /* helle Tönung für Flächen mit dunkler Schrift */
  --color-link: var(--color-brand-strong);
  --color-button: var(--color-brand);
  --color-on-button: #FFFFFF;
  --color-button-hover: #6440D2;

  /* Typografie (selbst gehostet, siehe fonts.css) */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --tracking-display: -0.035em;

  /* Formen */
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --container: 1180px;
}