/* ==========================================================================
   msg.Policy Suite — geteilte Design-Tokens (AI-328, Phase A).

   Ein Sheet auf dem Suite-Origin (/shared/v1/tokens.css): Token-Änderung =
   ein Commit + ein Deploy von suite-frontend, kein Komponenten-Rebuild.

   Palette "Nebel" aus dem Dashboard-Refinement-Handoff (2026-08). Hell ist
   kanonisch; Dunkel ist die abgeleitete Variante (nicht Teil des Handoffs).

   Scope :where(:root, .suiteBrand): Komponenten konsumieren über :root, die
   Shell über .suiteBrand. :where() hält die Spezifität bei 0 — ein lokales
   `:root { --accent: … }` einer Komponente gewinnt immer.

   Font-Stacks: die Shell liefert die Familien über next/font-Variablen
   (--font-source-serif/--font-plex-mono); Komponenten laden Google Fonts
   direkt und fallen auf die Familiennamen zurück.
   ========================================================================== */
:where(:root, .suiteBrand) {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --line: #e3e5e9;
  /* line-strong ist die Grenze von Bedienelementen (Pillen, Eingaben,
     Tabellenkopf). WCAG 1.4.11 verlangt dafür 3:1 — --line ist mit 1.16:1 auf
     --bg eine reine Zierlinie und lässt Knöpfe wie Text aussehen.
     3.28:1 auf --bg, 3.58:1 auf --surface. */
  --line-strong: #82888f;
  --ink: #171a1d;
  /* muted und faint sind zwei Stufen, nicht eine: muted ist Sekundärtext,
     faint das Kleingedruckte darunter. Sie müssen sichtbar auseinanderliegen
     (1.50:1), sonst ist jede Hierarchie, die darauf baut, wirkungslos. */
  --muted: #4f555c;
  /* faint trägt echte Information (Status, Eyebrows) in Kleingrößen —
     ≥4.5:1 auch auf --bg (WCAG AA), nicht nur auf --surface. */
  --faint: #6a7076;
  --accent: #3a5fa8;
  --accent-soft: #ecf1fa;
  /* Störungssignal (Fehlerblase, Status "warn") — als Text ≥4.5:1 auf --bg. */
  --warn: #a8401c;

  /* Radien: "rund" (Handoff) — Grid-Container / Controls & offenes Panel. */
  --r: 26px;
  --rs: 14px;

  --display: var(--font-source-serif, 'Source Serif 4'), Georgia, serif;
  --body: var(--font-source-serif, 'Source Serif 4'), Georgia, serif;
  --mono: var(--font-plex-mono, 'IBM Plex Mono'), ui-monospace, monospace;

  /* Komponenten-Coins (design-language §3): jede Fläche trägt das echte
     Artwork — dasselbe Bild, das der Launcher auf der Kachel zeigt (AI-437),
     hier als Datei der Designschicht ausgeliefert (output zuerst in AI-443,
     die übrigen sieben in AI-470). Damit stimmen Kachel und Kopfzeile
     derselben Komponente überein; die gemalten Verlaufs-Scheiben sind Geschichte.

     Der Pfad ist wurzelrelativ wie die Sheets: unter der Suite kommt er vom
     Suite-Origin, standalone aus der vendorierten Kopie — dieselbe URL, zwei
     Quellen. Die Glyphe steckt im Bild, also darf die Seite keine mehr in die
     Münze setzen (das <span> im h1 entfällt). */
  --suite-coin-fonds: url(/shared/v1/coin-fonds.png) center / cover no-repeat;
  --suite-coin-order: url(/shared/v1/coin-order.png) center / cover no-repeat;
  --suite-coin-billing: url(/shared/v1/coin-billing.png) center / cover no-repeat;
  --suite-coin-partner: url(/shared/v1/coin-partner.png) center / cover no-repeat;
  --suite-coin-rechnungslegung: url(/shared/v1/coin-rechnungslegung.png) center / cover no-repeat;
  --suite-coin-ops: url(/shared/v1/coin-ops.png) center / cover no-repeat;
  --suite-coin-provision: url(/shared/v1/coin-provision.png) center / cover no-repeat;
  --suite-coin-output: url(/shared/v1/coin-output.png) center / cover no-repeat;
  --suite-coin-desk: url(/shared/v1/coin-desk.png) center / cover no-repeat;

  /* Flächenidentität (AI-443): je Oberfläche die zwei Farben, aus deren Verlauf
     ihr Coin-Artwork besteht — Endpunkt 1 oben rechts, Endpunkt 2 unten links,
     in der Achse des Bildes. Zwei sind der Regelfall, nicht das Maximum: eine
     Fläche darf später mehr führen, dann wächst ihr Block.

     ACHTUNG, Platzhalterwerte. Das Artwork aus AI-437 ist ein Zwischenstand —
     die endgültigen Logos kommen aus dem Design und folgen denselben Prinzipien,
     aber nicht zwingend denselben Farbtönen. Die Werte hier sind an den
     PNG-Dateien gemessen (Sektormedian des Rings, weiße Glyphe maskiert), nicht
     gestalterisch entschieden. Zwei Folgen davon, beide beabsichtigt:
     β und κ liegen im selben Blau, und der Textakzent unten stammt bei sechs
     der sieben Komponenten weiterhin aus AI-367 statt aus diesen Farben —
     output ist die Ausnahme, dort ist er abgeleitet. Beides bereinigt der
     Logo-Satz; die Mechanik steht schon, es ändert sich dann nur diese Liste. */
  --suite-accent-fonds-1: #df2d5f;
  --suite-accent-fonds-2: #ac0046;
  --suite-accent-order-1: #a029bd;
  --suite-accent-order-2: #3c38dc;
  --suite-accent-billing-1: #512fe3;
  --suite-accent-billing-2: #0165d2;
  --suite-accent-partner-1: #f54f87;
  --suite-accent-partner-2: #ad18bd;
  --suite-accent-rechnungslegung-1: #dc8200;
  --suite-accent-rechnungslegung-2: #fa4606;
  --suite-accent-ops-1: #3f3fdc;
  --suite-accent-ops-2: #a515b2;
  --suite-accent-provision-1: #2d40e9;
  --suite-accent-provision-2: #0085d8;
  --suite-accent-alpha-1: #df295c;
  --suite-accent-alpha-2: #8609c0;
  --suite-accent-sigma-1: #b45d00;
  --suite-accent-sigma-2: #dd950a;
  /* output heißt nach der Komponente, nicht nach dem Zeichen (δ) — wie alle
     Schlüssel hier, damit --suite-coin-output und --suite-accent-output-* zur
     selben Fläche gehören. Es ist auch die erste Fläche, deren Textakzent
     tatsächlich aus dem Logo abgeleitet ist (siehe unten): Indigo passte zu
     keiner der beiden Farben und fiel als Erstes auf. */
  --suite-accent-output-1: #f72370;
  --suite-accent-output-2: #eb480f;
  --suite-accent-suite-1: #6eb055;
  --suite-accent-suite-2: #008acf;
  /* Die drei Produkte bringen ihr Artwork aus eigenem Kontext mit — mitgeführt,
     damit die Liste vollständig ist, nicht hier entschieden. */
  --suite-accent-gamma-1: #c7b202;
  --suite-accent-gamma-2: #459913;
  --suite-accent-process-1: #d89472;
  --suite-accent-process-2: #ee6e9b;
  /* desk (Arbeitsplatz von msg.process:it) trägt das Paar seines Produkts —
     ausdrücklich ein Einzelfall, nicht die Regel „Unterfläche erbt", siehe
     design-language §3 (AI-473). Verweis statt Hexwerte: am Artwork gemessen
     ergäbe desk #dc6d73 / #b14e63, und wenn der endgültige Logosatz die
     Trennung bringt, ändert sich genau diese Zeile. */
  --suite-accent-desk-1: var(--suite-accent-process-1);
  --suite-accent-desk-2: var(--suite-accent-process-2);
  --suite-accent-ask-1: #5a4be5;
  --suite-accent-ask-2: #2c5df6;

  /* Coin-Slot: basis.css malt die Kopfzeilen-Münze mit var(--coin). Den Slot
     setzt das Flächenattribut unten; der Default hält die Münze lesbar, falls
     eine Seite keine Fläche wählt. */
  --coin: radial-gradient(120% 120% at 30% 25%, #4a5058 0%, #2c3138 45%, #1d2126 78%, #14171a 100%);

  /* Identitäts-Slots. Eine Seite gestaltet mit --accent-1/--accent-2 und
     --accent-gradient, ohne den Namen ihrer Fläche zu kennen — derselbe Bau wie
     --coin. Der Default lässt beide Endpunkte auf den Textakzent fallen: eine
     Seite ohne Flächenattribut bekommt einen einfarbigen "Verlauf" statt eines
     fremden Farbpaars.

     225deg ist die Achse des Artworks (oben rechts → unten links), damit ein
     Verlauf im UI in dieselbe Richtung läuft wie der auf der Münze. */
  --accent-1: var(--accent);
  --accent-2: var(--accent);
  --accent-gradient: linear-gradient(225deg, var(--accent-1), var(--accent-2));

  /* Optische Zentrierung der Math-Italic-Glyphe in der Münze. Die Glyphen sind
     unterschiedlich hoch aufgehängt, also ist der Versatz Teil der
     Komponenten-Identität und nicht der Grundausstattung: 𝛗 braucht -.14em
     senkrecht, 𝛕 𝛃 𝛑 𝛒 𝛚 kommen mit -.07em aus. Als Token, damit der
     Identitätsblock einer Komponente aus Variablen besteht und keine
     CSS-Regel mitschleppen muss. */
  --coin-glyph-nudge: translate(-0.07em, -0.07em);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme='light']),
         :root:not([data-theme='light']) .suiteBrand) {
    --bg: #141619;
    --surface: #1d2025;
    --surface-2: #181b1f;
    --line: #2a2e35;
    --line-strong: #747b83;
    --ink: #e8eaed;
    --muted: #bcc2c9;
    --faint: #8f959d;
    --accent: #8aa7dc;
    --accent-soft: #26344c;
    --warn: #e8906b;
    color-scheme: dark;
  }
}

:where(:root[data-theme='dark'],
       :root[data-theme='dark'] .suiteBrand) {
  --bg: #141619;
  --surface: #1d2025;
  --surface-2: #181b1f;
  --line: #2a2e35;
  --line-strong: #747b83;
  --ink: #e8eaed;
  --muted: #bcc2c9;
  --faint: #8f959d;
  --accent: #8aa7dc;
  --accent-soft: #26344c;
  --warn: #e8906b;
  color-scheme: dark;
}

/* ==========================================================================
   Flächen (AI-443)

   Eine Seite sagt am <html>, welche Fläche sie ist:

     <html lang="de" data-suite-flaeche="order">

   Damit sitzen Münze, Identitätsfarben und Textakzent — in beiden Schemata.
   Das ersetzt den Override-Block, den bisher jede einzelne Seite jedes
   Komponenten-Repos trug (fünf Zeilen, wörtlich kopiert, sieben Repos):

     :root { --accent: #0e6b80; --accent-soft: #e4f2f6; --coin: var(--suite-coin-order); }
     :root[data-theme="dark"] { --accent: #4fc3de; --accent-soft: #123842; }
     @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { … } }

   Der Vertrag aus design-language.md §4.1 bleibt: alles steht in :where(),
   also bei Spezifität 0 — ein lokales :root { --accent: … } einer Komponente
   gewinnt weiterhin, etwa um eine Farbe vor der Aufnahme hier zu erproben.

   Die Blöcke stehen nach der Palette, weil sie sie überschreiben: der Hell-Satz
   je Fläche schlägt den Dunkel-Satz der Palette, deshalb folgen darunter die
   beiden Dunkel-Zweige in derselben Reihenfolge wie oben.

   Textakzent (--accent/--accent-soft) tragen heute nur die sieben Komponenten:
   das sind die in AI-367 über elf Kontrastpaare geprüften Werte. Die übrigen
   Flächen führen ihre Identität, aber keinen Textakzent — mit Platzhalter-Logos
   wäre er ungeprüft, und ein ungeprüfter Akzent ist schlechter als der neutrale
   Default der Palette. Er wird nachgezogen, wenn die endgültigen Logos stehen;
   dann stammt er per Entscheidung aus --suite-accent-<fläche>-1/-2 statt aus
   der alten Permutationstabelle.
   ========================================================================== */
:where(:root[data-suite-flaeche='fonds']) {
  --accent-1: var(--suite-accent-fonds-1);
  --accent-2: var(--suite-accent-fonds-2);
  --coin: var(--suite-coin-fonds);
  --accent: #a018c5;
  --accent-soft: #f8ebfb;
}
:where(:root[data-suite-flaeche='order']) {
  --accent-1: var(--suite-accent-order-1);
  --accent-2: var(--suite-accent-order-2);
  --coin: var(--suite-coin-order);
  --accent: #0e6b80;
  --accent-soft: #e4f2f6;
}
:where(:root[data-suite-flaeche='billing']) {
  --accent-1: var(--suite-accent-billing-1);
  --accent-2: var(--suite-accent-billing-2);
  --coin: var(--suite-coin-billing);
  --accent: #835a09;
  --accent-soft: #f9eed9;
}
:where(:root[data-suite-flaeche='partner']) {
  --accent-1: var(--suite-accent-partner-1);
  --accent-2: var(--suite-accent-partner-2);
  --coin: var(--suite-coin-partner);
  --accent: #ab288f;
  --accent-soft: #fceaf8;
}
:where(:root[data-suite-flaeche='rechnungslegung']) {
  --accent-1: var(--suite-accent-rechnungslegung-1);
  --accent-2: var(--suite-accent-rechnungslegung-2);
  --coin: var(--suite-coin-rechnungslegung);
  --accent: #1b6e5c;
  --accent-soft: #ddf4ef;
}
:where(:root[data-suite-flaeche='ops']) {
  --accent-1: var(--suite-accent-ops-1);
  --accent-2: var(--suite-accent-ops-2);
  --coin: var(--suite-coin-ops);
  --accent: #2b61af;
  --accent-soft: #e7f0fc;
}
:where(:root[data-suite-flaeche='provision']) {
  --accent-1: var(--suite-accent-provision-1);
  --accent-2: var(--suite-accent-provision-2);
  --coin: var(--suite-coin-provision);
  --accent: #ba1e5d;
  --accent-soft: #f8ecf1;
}
:where(:root[data-suite-flaeche='alpha']) {
  --accent-1: var(--suite-accent-alpha-1);
  --accent-2: var(--suite-accent-alpha-2);
}
:where(:root[data-suite-flaeche='sigma']) {
  --accent-1: var(--suite-accent-sigma-1);
  --accent-2: var(--suite-accent-sigma-2);
}
/* output: der einzige Textakzent, der schon aus dem Logo kommt statt aus der
   alten Zuordnungstabelle. Verfahren wie AI-367 — Farbton von
   --suite-accent-output-1 halten (338°), nur Sättigung und Helligkeit suchen,
   bis die Hausnorm getroffen ist (5.61 hell / 8.80 dunkel auf --bg,
   --accent-soft 1.15 bzw. 1.30 gegen --surface). Zwölf Paare geprüft,
   schlechtestes 5.32:1.

   Warum Endpunkt 1 und nicht der Gesamteindruck der Münze: der zweite Endpunkt
   ist Orange und liegt damit auf --warn (0° Abstand) — als Akzent wäre er die
   Fehlerfarbe. Der flächengewichtete Mittelwert der Münze (354°, Rot) käme dem
   Bild näher, bleibt --warn aber nur 21° fern. Warnsemantik geht vor Identität
   (design-language §3), also der Endpunkt mit 37–40° Abstand. */
:where(:root[data-suite-flaeche='output']) {
  --accent-1: var(--suite-accent-output-1);
  --accent-2: var(--suite-accent-output-2);
  --coin: var(--suite-coin-output);
  --accent: #c01050;
  --accent-soft: #feeaf1;
}
:where(:root[data-suite-flaeche='suite']) {
  --accent-1: var(--suite-accent-suite-1);
  --accent-2: var(--suite-accent-suite-2);
}
:where(:root[data-suite-flaeche='gamma']) {
  --accent-1: var(--suite-accent-gamma-1);
  --accent-2: var(--suite-accent-gamma-2);
}
:where(:root[data-suite-flaeche='process']) {
  --accent-1: var(--suite-accent-process-1);
  --accent-2: var(--suite-accent-process-2);
}
:where(:root[data-suite-flaeche='desk']) {
  --accent-1: var(--suite-accent-desk-1);
  --accent-2: var(--suite-accent-desk-2);
  --coin: var(--suite-coin-desk);
}
:where(:root[data-suite-flaeche='ask']) {
  --accent-1: var(--suite-accent-ask-1);
  --accent-2: var(--suite-accent-ask-2);
}

/* Dunkel: nur der Textakzent dreht. Die Identitätsfarben sind
   scheme-invariant wie die Münze — das Logo wechselt die Farbe nicht. */
@media (prefers-color-scheme: dark) {
  :where(:root[data-suite-flaeche='fonds']:not([data-theme='light'])) {
    --accent: #e19bf4;
    --accent-soft: #4e1f5b;
  }
  :where(:root[data-suite-flaeche='order']:not([data-theme='light'])) {
    --accent: #4fc3de;
    --accent-soft: #123842;
  }
  :where(:root[data-suite-flaeche='billing']:not([data-theme='light'])) {
    --accent: #dbae54;
    --accent-soft: #41310f;
  }
  :where(:root[data-suite-flaeche='partner']:not([data-theme='light'])) {
    --accent: #df9ed1;
    --accent-soft: #62094f;
  }
  :where(:root[data-suite-flaeche='rechnungslegung']:not([data-theme='light'])) {
    --accent: #29cba7;
    --accent-soft: #183932;
  }
  :where(:root[data-suite-flaeche='ops']:not([data-theme='light'])) {
    --accent: #93b7ea;
    --accent-soft: #1f3452;
  }
  :where(:root[data-suite-flaeche='provision']:not([data-theme='light'])) {
    --accent: #df9eb9;
    --accent-soft: #601735;
  }
  :where(:root[data-suite-flaeche='output']:not([data-theme='light'])) {
    --accent: #fd95bb;
    --accent-soft: #6c0127;
  }
}

:where(:root[data-suite-flaeche='fonds'][data-theme='dark']) {
  --accent: #e19bf4;
  --accent-soft: #4e1f5b;
}
:where(:root[data-suite-flaeche='order'][data-theme='dark']) {
  --accent: #4fc3de;
  --accent-soft: #123842;
}
:where(:root[data-suite-flaeche='billing'][data-theme='dark']) {
  --accent: #dbae54;
  --accent-soft: #41310f;
}
:where(:root[data-suite-flaeche='partner'][data-theme='dark']) {
  --accent: #df9ed1;
  --accent-soft: #62094f;
}
:where(:root[data-suite-flaeche='rechnungslegung'][data-theme='dark']) {
  --accent: #29cba7;
  --accent-soft: #183932;
}
:where(:root[data-suite-flaeche='ops'][data-theme='dark']) {
  --accent: #93b7ea;
  --accent-soft: #1f3452;
}
:where(:root[data-suite-flaeche='provision'][data-theme='dark']) {
  --accent: #df9eb9;
  --accent-soft: #601735;
}
:where(:root[data-suite-flaeche='output'][data-theme='dark']) {
  --accent: #fd95bb;
  --accent-soft: #6c0127;
}