/* ==========================================================================
   Capento — gemeinsame Design-Tokens
   Eine Quelle fuer Farben/Schrift/Logo. React (Lieferavise) und
   Angular (Rechnungseingang) koennen dieselbe Datei einbinden -> ein Look
   ueber alle Module. Markenfarben = Capento-Logo (Teal + gelber Fokuspunkt).
   ========================================================================== */
:root {
  /* Markenfarben (Capento-Logo) */
  --he-brand:        #0d6e87;   /* Primaer (Aktionen, Links) - Capento-Teal */
  --he-brand-dark:   #0a5568;
  --he-accent:       #f2c511;   /* Akzent - Capento-Fokuspunkt (gelb) */
  --he-warn:         #f59e0b;
  --he-danger:       #ef4444;

  /* Flaechen & Text */
  --he-bg:           #0d1117;
  --he-surface:      #161b22;
  --he-surface-2:    #21262d;
  --he-border:       #30363d;
  --he-text:         #e6edf3;
  --he-text-muted:   #9198a1;

  /* Typografie & Form */
  --he-font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --he-radius: 12px;
  --he-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: light) {
  :root {
    --he-bg:        #f5f7fa;
    --he-surface:   #ffffff;
    --he-surface-2: #eef1f5;
    --he-border:    #d7dce3;
    --he-text:      #1a2029;
    --he-text-muted:#5b6572;
    --he-shadow:    0 8px 30px rgba(0, 0, 0, .10);
  }
}