/* Manea Design-Tokens - die einzige Quelle fuer Rollenfarben, Radien und das
   Karten-/Button-Grundmass. Wird von web_checkout, web_control und
   web_manea-mailarchiv als public/css/tokens.css ausgeliefert und VOR dem
   jeweiligen App-Stylesheet eingebunden.

   Warum die Datei existiert: dieselbe Rolle "Akzent stark" hatte sieben Werte
   (#45c9bb, #3bc7b5, #4adcca, #0b7569, #0f7f71, #0f766b, #0e7a6d), dazu #0c8073
   als Buttonfarbe. Nebeneinander im Browser sind die Toene unterscheidbar, und
   jede Aenderung musste an drei Orten nachgezogen werden. Hier steht jede Rolle
   je Theme genau einmal; die Apps benennen ihre eigenen Tokens darauf um
   (--acc-2: var(--accent-strong) usw.) und behalten nur, was wirklich app-eigen
   ist (Flaechen, Textstufen, Statustinten).

   Kopieren in eine App: tools-frei per cp; die Testsuite jeder App vergleicht
   ihre Kopie byteweise gegen diese Quelle, solange der Workspace erreichbar ist.

   Aenderungen an Farbwerten sind nur mit Nachrechnung erlaubt: WCAG 2.x, Alpha
   ueber die real darunterliegende Flaeche komponiert, gegen --surface,
   --surface2/--surface-2 und --bg jeder App. Die in Welle 2 und 3 erreichten
   Werte sind die Untergrenze. */

:root {
  /* Markenton fuer Fuellungen ohne Text (Punkte, Balken, Checkbox, Fortschritt).
     Unter nahezu weisser Schrift erreicht er nur 3,34:1 - Text gehoert auf
     --button, Akzentschrift auf --accent-strong.

     2026-09-05, Entscheidung Sven: der Markenton kommt aus dem Design-Handoff
     (#157567, "Farben nach Manea Brand Book"). Die Archivruntime fuehrt ihn
     seit dem Umbau vom 2026-09-04 bereits; Control und Checkout ziehen hiermit
     nach, damit ein Kunde beim Wechsel zwischen den Produkten nicht zwei
     Marken sieht.

     Nachgerechnet wie im Kopf verlangt, gegen --bg, --surface und --surface2
     beider Themes. Als Fuellung/Rand gilt 3,0:1 (WCAG 1.4.11), nicht 4,5:1:
       hell   #ffffff 5,57  #f6f8f7 5,22  #f1f5f4 5,07   (vorher 3,41/3,20/3,10)
       dunkel #080c0c 3,53  #0d1212 3,39  #111717 3,26   (vorher 5,76/5,53/5,31)
     Der neue Ton ist im Hellmodus deutlich besser und im Dunkelmodus enger.
     Die schlechteste Flaeche bleibt mit 3,26:1 ueber der Schwelle -- wer hier
     weiter abdunkelt, unterschreitet sie. */
  --accent: #157567;
  /* Akzentschrift. Dark ist der helle Ton: #45c9bb statt #3bc7b5 hebt die
     Archivruntime von 7,50:1 auf 7,72:1 blank und von 6,61:1 auf 6,81:1 ueber
     der Akzenttoenung; Checkout/Control bleiben unveraendert. Gemessen ueber
     --surface, --surface-2 und --bg, schlechteste Flaeche. */
  --accent-strong: #45c9bb;
  --accent-soft: rgba(19, 156, 139, .1);
  --accent-line: rgba(19, 156, 139, .4);
  /* Fokusring deckend, nicht die transparente Akzentlinie: die erreicht ueber
     jeder Flaeche nur 1,45-1,85:1, WCAG 2.2 SC 1.4.11 verlangt 3:1. */
  --focus: #45c9bb;
  --ok: #43c98a;
  --warn: #e6c46b;
  /* #ff7d72 statt #ff7a67: heller, also besser auf dunklen Flaechen
     (6,16 -> 6,31:1 im Archiv, 7,10 -> 7,27:1 in Checkout/Control). Die
     Ink-auf-Toenung-Messung von Control steigt mit der duenneren Toenung von
     8,69:1 auf 8,85:1. */
  --danger: #ff7d72;
  /* Akzentflaeche, die Text traegt. #0b7569 statt #0c8073 hebt den
     Checkout-Primaerbutton von 4,74:1 auf 5,48:1; das Archiv nutzt den Wert
     bereits. */
  --button: #0b7569;
  --button-ink: #f5fffd;
  /* Hoverflaeche des Primaerbuttons. Bewusst dunkler als --button und in beiden
     Themes derselbe Wert: die vier bisherigen Hoverwege lagen bei 4,59-6,30:1
     (Archiv mischte --text hinein und wurde in Dark heller), #0a675c liegt mit
     6,63:1 (dark) / 6,76:1 (light) ueber allen vieren. */
  --button-hover: #0a675c;

  /* Radien. Die Apps hatten drei Schreibweisen fuer dieselbe Pille (99px, 999px,
     "border-radius:8px" hartkodiert 30x). --radius-sharp ist die Kante der
     Archivruntime, --radius-soft die von Checkout/Control. */
  --radius-sharp: 4px;
  --radius-soft: 8px;
  /* Dritter Schritt, 2026-09-04: der Design-Handoff setzt Panels, Karten und
     Tabellen durchgaengig auf 12px (app.dc.html, .app-table und die
     KPI-Karten). Die Skala endete bei 8px, und ein 12er-Literal in einer
     App waere genau die Zersplitterung, gegen die diese Datei gebaut ist --
     dieselbe Pille stand hier einmal in drei Schreibweisen. Additiv: kein
     bestehender Wert aendert sich. */
  --radius-panel: 12px;
  --radius-pill: 999px;

  /* Karten-Grundmass. Gilt in allen drei Apps identisch. */
  --card-pad: 18px;
  --card-pad-h: 14px 18px;
}

html[data-theme="light"] {
  --accent: #157567;
  --accent-strong: #0b7569;
  --accent-soft: rgba(19, 156, 139, .08);
  --accent-line: rgba(19, 156, 139, .32);
  --focus: #0c8073;
  --ok: #0f7046;
  /* #7d5a17 statt #8a6a10: dunkler, also besser auf hellen Flaechen
     (4,60 -> 5,71:1 in Control). Das Archiv nutzt den Wert bereits. */
  --warn: #7d5a17;
  /* #a83e2f statt #b94b3f: 4,61 -> 5,63:1 in Checkout/Control, 5,07 -> 6,19:1
     fuer weisse Schrift auf .btn-danger im Archiv. */
  --danger: #a83e2f;
  --button: #0b7569;
  --button-ink: #ffffff;
}

/* ===== Kartenkontrakt =====

   Vokabular: .card ist der Rahmen, .card-h der Kopf, .card-b/.card-body der
   Rumpf. Beide Baender bringen das Polster mit, die Karte selbst nicht.

   Vorher bedeutete .card in der Archivruntime 0 Padding und in Control 18 px.
   Kopiertes Markup rendert damit entweder randbuendig (Control-Markup im Archiv)
   oder doppelt gepolstert (Archiv-Markup in Control). Gegen das Doppelpolster
   steht die Regel unten: sobald ein Band da ist, polstert die Karte nicht mehr.
   Gegen randbuendigen Inhalt steht CardPaddingContractTest in jeder App, die
   Karten im Markup fuehrt (Control, Archivruntime; Checkout fuehrt heute keine).
   Er misst die Strecke zwischen Text und Rahmen: polstert weder die Karte selbst,
   noch ein Band, noch das Textelement, ist das ein Fehler, kein Stilmittel.

   Bewusst KEIN Default-Padding auf .card: Tabellen, Listen und Pager sitzen
   absichtlich buendig im Rahmen. Ein Default haette diese Flaechen eingerueckt.

   :has() ist seit 2023 in allen Zielbrowsern verfuegbar. Faellt es aus, wird die
   Selektorliste verworfen und Control-Karten mit Band polstern doppelt -
   sichtbar, aber nicht kaputt. */
.card:has(> .card-h),
.card:has(> .card-b),
.card:has(> .card-body) { padding: 0; }
.card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--card-pad-h);
}
.card-b,
.card-body { padding: var(--card-pad); }

/* ===== Buttonkontrakt =====

   Die Bedeutung steckt in der Variante, nicht in .btn: .btn-primary ist die
   Hauptaktion (gefuellte --button-Flaeche mit --button-ink), .btn-danger die
   zerstoerende, .btn-ghost die stille. Vorher gab es .btn-primary nur im Archiv
   - die Control-Anmeldung fuehrte ihre Hauptaktion im schwaechsten der drei
   Stile. Flaeche, Rand, Groesse und Schrift setzt jede App in ihrem eigenen
   Stylesheet auf ihrer eigenen Dichte; hier steht nur die gemeinsame Form. */
.btn-primary,
.btn-danger,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}