/*
 * Design-Tokens der Herzig-Web-UI.
 *
 * QUELLE DER FARBEN: die SVG-Motive in `design/SVG-Motive für Illustrationen/svg/`.
 * Das sind Vektordaten mit exakten Werten — sie schlagen jede Messung aus dem
 * Bildschirmfoto. Der gesamte Motivsatz kommt mit acht Farben aus; sie stehen
 * unten als „Quellfarbe" markiert. Alles Weitere ist daraus abgeleitet
 * (Mischung Richtung Papier bzw. Tinte), damit CSS-Flächen und Motive
 * denselben Ton treffen.
 *
 * Frühere Fassung dieser Datei nutzte aus `intranet-design.webp` gemessene
 * Werte. Die lagen durchgehend heller und gesättigter als die Quelle (etwa
 * #fd7a57 statt #e8734a). Das Bild trägt kein Farbprofil, die Messung war also
 * sRGB-korrekt — die Abweichung stammt aus dem Bild selbst. Wo Motive und
 * CSS-Flächen aneinanderstoßen, wäre der Unterschied sichtbar geworden.
 *
 * Diese Datei enthält ausschließlich Variablen — kein Selektor außer :root.
 */

:root {
  /* --------------------------------------------------------------------
   * Marke
   * ------------------------------------------------------------------ */
  --hc-ink: #22304f;           /* Quellfarbe — Kontur, Schrift, dunkle Fläche */
  --hc-ink-body: #2e3d59;      /* abgeleitet — Fließtext, 10,2:1 auf Papier */

  --hc-navy: var(--hc-ink);    /* Der Motivsatz kennt genau eine dunkle Farbe. */
  --hc-navy-700: #1a2640;      /* abgeleitet — Hover auf dunkler Fläche */
  --hc-navy-500: #3a4a68;      /* abgeleitet — zurückgenommene Akzente */

  --hc-orange: #e8734a;        /* Quellfarbe — Aktionsfläche, Marker */
  --hc-orange-600: #e2673f;    /* Quellfarbe — dunklere Variante, Hover */
  --hc-orange-300: #f2a58c;    /* Quellfarbe — Lachs, Motivflächen */
  --hc-orange-200: #f3c2ad;    /* abgeleitet — aktive Navigationspille */
  --hc-orange-100: #f9ebe0;    /* abgeleitet — Badge-Fläche */
  --hc-orange-050: #faf0e7;    /* abgeleitet — Hover auf heller Fläche */

  --hc-sage: #8fa876;          /* Quellfarbe — grüner Akzent, Diagramm */
  --hc-sage-300: #d7ddc4;      /* abgeleitet — helle Diagrammbalken */
  --hc-sage-200: #cbd4b6;      /* Quellfarbe — Motiv-Kreise */
  --hc-sage-100: #e8e9d8;      /* abgeleitet — Badge-Fläche */

  --hc-amber: #e7c169;         /* Quellfarbe — Motiv-Kreis, Ranghinweis */
  --hc-amber-300: #dfb44f;     /* abgeleitet */
  --hc-amber-100: #f5e8c9;     /* abgeleitet — Badge-Fläche */

  /* Schriftfarbe auf orangefarbener Fläche.
   *
   * Gerechnet auf der Marken-Fläche #e8734a:
   *   Weiß (so im Entwurf)          3,01:1 — reicht nur für große/fette Schrift
   *   Tinte #22304f                 4,35:1 — knapp unter der Textschwelle
   *   diese abgedunkelte Tinte      5,14:1 — erfüllt AA auch für normalen Text
   *
   * Buttonschrift ist 15 px/600 und zählt damit als normaler Text (WCAG: groß
   * ist erst ab 24 px bzw. 18,66 px fett), also gilt 4,5:1. Die Fläche bleibt
   * unverändert die Markenfarbe — nur die Schrift darauf wird dunkler.
   *
   * Wer Entwurfstreue vorzieht, setzt hier `#fff`: eine Zeile, eine bewusste
   * Entscheidung, an einer Stelle nachlesbar. */
  --hc-on-orange: #1a243b;

  /* --------------------------------------------------------------------
   * Flächen und Linien
   *
   * Karte und Untergrund liegen dicht beieinander; getrennt wird über die
   * Linie, nicht über einen Helligkeitssprung.
   * ------------------------------------------------------------------ */
  --hc-canvas: #f7f3ea;        /* Seite und Seitenleiste */
  --hc-surface: #fbf7ef;       /* Quellfarbe — Karten, zugleich Papier der Motive */
  --hc-surface-sunken: #f4efe4;
  --hc-border: #e6e1d5;
  --hc-border-strong: #d8d2c4;
  --hc-divider: #efeae0;

  /* Papierfläche innerhalb der Motive (Dokument, Klemmbrett, Topf).
   * Bewusst ein eigenes Token: wer die Kartenfarbe ändert, soll damit nicht
   * ungewollt in die Zeichnungen greifen. */
  --hc-motif-paper: #fbf7ef;   /* Quellfarbe */

  /* --------------------------------------------------------------------
   * Schrift
   * ------------------------------------------------------------------ */
  --hc-muted: #66727f;         /* Unterzeilen, Tabellenkopf — 4,6:1 auf Papier */
  --hc-muted-soft: #8a94a1;    /* nur Platzhalter in Feldern, nie Inhalt */

  /* --------------------------------------------------------------------
   * Status — jeder Wert auf seiner eigenen Badge-Fläche gegengerechnet
   * ------------------------------------------------------------------ */
  --hc-danger: #b4472b;        /* 5,1:1 auf Papier · 4,6:1 auf --hc-orange-100 */
  --hc-danger-bg: var(--hc-orange-100);
  --hc-warning: #7f5c22;       /* 5,7:1 auf Papier · 5,0:1 auf --hc-amber-100 */
  --hc-warning-bg: var(--hc-amber-100);
  --hc-success: #3f6b3b;       /* 5,8:1 auf Papier · 5,1:1 auf --hc-sage-100 */
  --hc-success-bg: var(--hc-sage-100);
  --hc-info: var(--hc-navy-500);
  --hc-info-bg: #e7ebf1;

  /* --------------------------------------------------------------------
   * Typografie
   *
   * Die Motive setzen das €-Zeichen in Georgia; sonst gilt der Systemfont.
   * Es wird bewusst kein Fremdfont geladen — kein CDN, kein Drittanbieter-
   * Request. Ein selbst gehosteter Font wäre eine eigene Entscheidung (ADR).
   * ------------------------------------------------------------------ */
  --hc-font: "Avenir Next", "Segoe UI Variable", system-ui, -apple-system,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hc-font-serif: Georgia, "Times New Roman", serif;
  /* Fuer Werte, die zeichengenau gelesen und abgeschrieben werden — heute der
   * Klartext eines API-Tokens (K-046 Etappe 4). Eine Proportionalschrift
   * stellt 0 und O, l und 1 kaum unterscheidbar dar; wer den Wert von Hand
   * uebertraegt, vertippt sich daran. Auch hier kein Fremdfont: die Liste
   * nennt die Monospace-Schriften, die die Systeme mitbringen. */
  --hc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --hc-text-xs:   0.75rem;   /* 12px — Badges, Achsenbeschriftung */
  --hc-text-sm:   0.8125rem; /* 13px — Unterzeilen, Tabellenkopf */
  --hc-text-base: 0.9375rem; /* 15px — Fließtext */
  --hc-text-md:   1rem;      /* 16px — Navigation, Listentitel */
  --hc-text-lg:   1.125rem;  /* 18px — Kartentitel klein */
  --hc-text-xl:   1.375rem;  /* 22px — Kartentitel */
  --hc-text-2xl:  1.75rem;   /* 28px — Abschnittsüberschrift */
  --hc-text-3xl:  2.25rem;   /* 36px — Seitentitel */
  --hc-text-kpi:  2.75rem;   /* 44px — Kennzahl */

  --hc-leading-tight: 1.15;
  --hc-leading-snug: 1.35;
  --hc-leading-normal: 1.55;

  --hc-weight-regular: 400;
  --hc-weight-medium: 500;
  --hc-weight-semibold: 600;
  --hc-weight-bold: 700;

  /* --------------------------------------------------------------------
   * Raster und Abstände (4-px-Basis)
   * ------------------------------------------------------------------ */
  --hc-space-1: 0.25rem;
  --hc-space-2: 0.5rem;
  --hc-space-3: 0.75rem;
  --hc-space-4: 1rem;
  --hc-space-5: 1.25rem;
  --hc-space-6: 1.5rem;
  --hc-space-8: 2rem;
  --hc-space-10: 2.5rem;
  --hc-space-12: 3rem;

  --hc-radius-sm: 6px;
  --hc-radius-md: 10px;   /* Buttons, Eingabefelder */
  --hc-radius-lg: 16px;   /* Karten */
  --hc-radius-xl: 20px;
  --hc-radius-pill: 999px;

  --hc-sidebar-width: 17rem;
  --hc-topbar-height: 4.5rem;
  --hc-content-max: 82rem;

  /* --------------------------------------------------------------------
   * Erhebung — der Entwurf arbeitet fast schattenlos
   * ------------------------------------------------------------------ */
  --hc-shadow-none: none;
  --hc-shadow-sm: 0 1px 2px rgba(34, 48, 79, 0.04);
  --hc-shadow-md: 0 6px 20px rgba(34, 48, 79, 0.08);
  --hc-shadow-focus: 0 0 0 3px rgba(232, 115, 74, 0.35);

  --hc-transition: 140ms ease;
}