/* ============================================================
   AB Industrie Service — Color tokens
   Kanonisch nach Skill `design-system` §3.
   Primär: Markenrot #A8192B · Anthrazit #11100B (warm, kein Reinschwarz)
   · Weiß. Sekundär: Akzent-Rot #C8243A + neutrale Grautöne.
   Statusfarben tragen Bedeutung — nie als Dekoration.
   Variablennamen bleiben stabil (red-*, steel-*, ink-*), damit
   bestehende Komponenten/Cards weiterlaufen.
   ============================================================ */
:root {
  /* ---- Markenrot-Rampe (#A8192B = Markenrot) ---- */
  --red-900: #5E0E18;
  --red-800: #8C1424; /* dunkleres Markenrot — Press / aktive Tabellen-Header */
  --red-700: #94182A;
  --red-600: #A8192B; /* PRIMÄR — Markenrot */
  --red-500: #C8243A; /* Akzent-Rot — Links, Sale, „Neu"-Badges */
  --red-400: #D9485A;
  --red-300: #E8818D;
  --red-100: #F6D5D9;
  --red-50:  #FFF5F6; /* sehr helles Rot — aktive Vergleichsspalte */

  /* explizite semantische Markennamen */
  --markenrot:   #A8192B;
  --akzent-rot:  #C8243A;
  --markenrot-dunkel: #8C1424;

  /* ---- Anthrazit / Ink (warm, aus dem Logo) ---- */
  --ink-900: #11100B; /* ANTHRAZIT — Fließtext, h1/h3/h4, Logo-„B" */
  --ink-800: #1A1813;
  --ink-700: #232019; /* dunkle Panel-Fläche (Hero, Footer) */
  --anthrazit: #11100B;

  /* ---- Neutrale Graustufen (kanonisch §3.2) ---- */
  --steel-900: #1A1813;
  --steel-800: #2A2823;
  --steel-700: #4A4A45;
  --steel-600: #6B6B6B; /* Grau Mittel — Sekundärtext, Bildunterschriften */
  --steel-500: #8A8A8A;
  --steel-400: #B4B4B4; /* Grau sehr hell — Pflegestempel */
  --steel-300: #D6D6D6;
  --steel-200: #E5E5E5; /* Grau Hell — Trennlinien, Tabellen-Linien */
  --steel-100: #F5F5F5; /* Box-Hintergrund Hinweis / sehr helle Fläche */
  --steel-50:  #FAFAFA; /* Zebrastreifen ungerade Zeile */
  --white:     #FFFFFF;

  /* benannte Grautöne */
  --grau-mittel: #6B6B6B;
  --grau-hell:   #E5E5E5;
  --grau-xhell:  #B4B4B4;
  --zebra:       #FAFAFA;

  /* ---- Statusfarben (§3.3) ---- */
  --status-success: #2E7D32; /* Erfolg / Auf Lager */
  --status-warning: #E6A700; /* Warnung / Hinweis */
  --status-danger:  #C8243A; /* Fehler / Sale / Gefahr (= Akzent-Rot) */

  /* ---- Hinweisboxen (§3.4) — Hintergrund + Akzent ---- */
  --box-hinweis-bg: #F5F5F5; --box-hinweis-accent: #6B6B6B;
  --box-tipp-bg:    #E8F5E9; --box-tipp-accent:    #2E7D32;
  --box-achtung-bg: #FFF8E1; --box-achtung-accent: #E6A700;
  --box-gefahr-bg:  #FDE8EC; --box-gefahr-accent:  #C8243A;

  /* ============================================================
     SEMANTISCHE ALIASE — diese in Komponenten verwenden
     ============================================================ */

  /* Marke */
  --brand:          var(--markenrot);
  --brand-strong:   var(--markenrot-dunkel);
  --brand-hover:    var(--markenrot-dunkel);
  --brand-press:    var(--markenrot-dunkel);
  --brand-soft:     #FFF5F6;
  --brand-on:       var(--white);
  --accent:         var(--akzent-rot);

  /* Text */
  --text-strong:    var(--anthrazit);
  --text-body:      var(--anthrazit);
  --text-muted:     var(--grau-mittel);
  --text-subtle:    var(--grau-xhell);
  --text-on-brand:  var(--white);
  --text-on-dark:   #F2F1EE;
  --text-on-dark-muted: #B4B4B4;
  --text-link:      var(--akzent-rot);   /* Inline-Links = Akzent-Rot */
  --text-heading-h2: var(--markenrot);   /* h2 = Markenrot (§3.6) */

  /* Flächen */
  --surface-page:   var(--white);
  --surface-card:   var(--white);
  --surface-sunken: var(--steel-100);
  --surface-dark:   var(--ink-700);
  --surface-darker: var(--ink-900);
  --surface-brand:  var(--markenrot);

  /* Rahmen / Linien */
  --border-subtle:  var(--grau-hell);
  --border-default: var(--grau-hell);
  --border-strong:  var(--steel-400);
  --border-on-dark: rgba(255,255,255,0.14);
  --focus-ring:     var(--akzent-rot);
}