/* ═══════════════════════════════════════════════════════════════════════════
   ERZEUGT — NICHT VON HAND ÄNDERN. Quelle: config/gestaltung_tokens.yml,
   Erzeuger: bin/gestaltung-tokens · Quelle sha256:b77e43c69d7b82259ca7534ef1a45a811c46406d89a364f39079f3ad64f45ba7
   Wächter: test/lint/gestaltung_tokens_test.rb (Kopie = Quelle) und
   test/lint/g2_basis_test.rb (Kontrast gerechnet, Scope, Dunkelsatz).

   WIRKT NUR UNTER html[data-ui="neu"] (neue Hülle bei NeueApp.an?, Mein Profil
   bei MeinProfil.an?). Ohne das Merkmal gibt es diese Werte nicht — die alte
   Oberfläche bleibt bis Tag X exakt wie heute. Am Tag X zieht der Satz auf :root.
   Werte: Lookbook-Abnahme 04.11.2026 (T2886); Herkunft je Gruppe in der Quelle.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HELL ── */
html[data-ui="neu"], html[data-ui="neu"] .v3-page {
  /* Flächen (L) */
  --v3-canvas: #f4f6f9;
  --v3-card: #ffffff;
  --v3-card2: #fbfcfe;
  --v3-hover: #fafbfe;
  --v3-sel: #eef4fe;
  --v3-mut-soft: #f1f4f9;
  --v3-line: #e6eaf1;
  --v3-line2: #eef1f6;
  /* Schrift-Farben (L) — ink3 NUR Nicht-Text (Deko, Platzhalter); Meta-Text = ink3-text */
  --v3-ink: #16233a;
  --v3-ink2: #5b6b84;
  --v3-ink3: #8b98ad;
  --v3-ink3-text: #5f6d85;
  /* Marke (L) — brand = Handlungsblau, marine = Fläche/Kopf */
  --v3-brand: #1e56c8;
  --v3-brand-soft: #e8effd;
  --v3-brand-line: #bcd3f7;
  --v3-brand-deep: #0f2b46;
  --v3-marine: #00306b;
  /* Status (L) — Fläche/Symbol ≥ 3:1, Text-Stufe ≥ 4,5:1 */
  --v3-ok: #178a50;
  --v3-ok-soft: #e5f5ec;
  --v3-ok-text: #12703c;
  --v3-warn: #c07600;
  --v3-warn-soft: #fdf3e2;
  --v3-warn-text: #8a5300;
  --v3-bad: #c93a4a;
  --v3-bad-soft: #fdeaec;
  --v3-bad-text: #b02a3a;
  /* Freundlicher Akzent (G2): Dank, Zuwendung, Spende, Mentoring */
  --v3-freude: var(--v3-akzent-tuerkis);
  --v3-freude-soft: var(--v3-akzent-tuerkis-soft);
  --v3-freude-text: var(--v3-akzent-tuerkis-text);
  /* Akzente der In-Praxi-PowerPoint-Vorlage (G2): Bereichsakzent, Band, Diagramm */
  --v3-akzent-hellblau: #00a5dc;
  --v3-akzent-hellblau-soft: #e2f4fb;
  --v3-akzent-hellblau-text: #006d94;
  --v3-akzent-petrol: #006e78;
  --v3-akzent-petrol-soft: #e0f0f1;
  --v3-akzent-petrol-text: #006e78;
  --v3-akzent-tuerkis: #00aab9;
  --v3-akzent-tuerkis-soft: #e0f5f7;
  --v3-akzent-tuerkis-text: #00727c;
  --v3-akzent-orange: #eb5a0a;
  --v3-akzent-orange-soft: #fdede4;
  --v3-akzent-orange-text: #b2420a;
  --v3-akzent-hellgrau: #e6ebf0;
  /* Diagramm-Reihen (G2) — ≥ 3:1 auf Karte, in dieser Reihenfolge vergeben */
  --v3-diag-1: var(--v3-brand);
  --v3-diag-2: #008a96;
  --v3-diag-3: #eb5a0a;
  --v3-diag-4: #006e78;
  --v3-diag-5: #8a7f7c;
  --v3-diag-6: #0089ba;
  /* Zahlungskanäle + fremde Hoheit (G2, wertgleich zur heutigen Oberfläche) */
  --v3-sepa: #2563eb;
  --v3-ueb: #0ea5a4;
  --v3-paypal: #7c6cf0;
  --v3-stripe: #b558d9;
  --v3-plat: #6d28d9;
  /* „Frag Claude“-Stellen (G2) */
  --v3-claude: #b4542d;
  --v3-claude-soft: #fbefe9;
  --v3-claude-text: #a3481f;
  /* Punkt-Symbole, kein Text (G2) */
  --v3-dot-ok: #22c55e;
  --v3-dot-warn: #f59e0b;
  --v3-dot-bad: #ef4444;
  --v3-dot-idle: var(--v3-ink3);
  /* Hülle der neuen App (G2; die alte Shell behält --sb*) */
  --v3-sb: var(--v3-marine);
  --v3-sb-ink: #e4eefb;
  --v3-sb-mut: #c3d5ee;
  --v3-sb-active: #0a3f82;
  --v3-sb-brand: #8fd3f0;
  --v3-top-bg: rgba(255,255,255,.86);
  --v3-shell-w: 248px;
  /* Tiefe (L) — Schatten statt Rahmen-Raster; Fokus = Ring (outline) + dieser Hof */
  --v3-shadow: 0 1px 2px rgba(22,35,58,.06),0 4px 14px rgba(22,35,58,.05);
  --v3-shadow-hoch: 0 2px 6px rgba(0,31,69,.10),0 18px 40px rgba(0,31,69,.14);
  --v3-karte-rand: transparent;
  --v3-fokus: 0 0 0 3px color-mix(in srgb,var(--v3-brand) 35%,transparent);
  /* Radien (L = G2) */
  --v3-r: 16px;
  --v3-r-sm: 11px;
  --v3-r-xs: 8px;
  --v3-r-pill: 999px;
  --p-r-gross: 20px;
  /* Schrift (L): eine Oberflächenschrift, eine Buchschrift nur für Namen und Titel; 8 Stufen (Team-Grund fs-3, Portal-Grund fs-4) */
  --v3-font: "Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --p-f-buch: "Literata",Georgia,serif;
  --v3-fs-1: 12px;
  --v3-fs-2: 13px;
  --v3-fs-3: 14px;
  --v3-fs-4: 16px;
  --v3-fs-5: 18px;
  --v3-fs-6: 22px;
  --v3-fs-7: 30px;
  --v3-fs-8: 44px;
  --v3-lh: 1.45;
  --p-lh: 1.55;
  --ds-lh-titel: 1.15;
  --v3-fw-normal: 400;
  --v3-fw-mittel: 500;
  --v3-fw-halb: 600;
  --v3-fw-fett: 700;
  --v3-fw-titel: 700;
  /* Abstände (G2-Leiter, § 7.5) + Rhythmus-Raster 4/8 (L, neue Abstände nur noch daraus) */
  --v3-s-6: 6px;
  --v3-s-8: 8px;
  --v3-s-10: 10px;
  --v3-s-12: 12px;
  --v3-s-14: 14px;
  --v3-s-16: 16px;
  --v3-s-24: 24px;
  --v3-s-44: 44px;
  --ds-s-4: 4px;
  --ds-s-32: 32px;
  --ds-s-48: 48px;
  --ds-s-64: 64px;
  /* Bewegung (L): drei Dauern, eine Kurve — nur als Antwort auf Handlung */
  --ds-dauer-1: 120ms;
  --ds-dauer-2: 220ms;
  --ds-dauer-3: 420ms;
  --ds-kurve: cubic-bezier(.2,.7,.2,1);
  /* Portal-Ausprägung (L): Marine-Verlauf, Bordeaux nur am Roten Buch und am Jahrgang, Knopf */
  --p-marine-2: #001f45;
  --p-bordeaux: #8e1b2e;
  --p-rb-text: #8e1b2e;
  --p-rb-soft: rgba(142,27,46,.08);
  --p-knopf: var(--v3-marine);
  --p-knopf-hover: #0a4a8f;
  --p-knopf-text: #fff;
  /* Lookbook-Bauteile (L): Skelett, Archiv-Etikett, Feld, Datumsband */
  --ds-skelett: #e9edf3;
  --ds-skelett-licht: #f6f8fb;
  --ds-etikett-bg: rgba(0,31,69,.86);
  --ds-etikett-ink: #fff;
  --ds-akzent-text: var(--v3-marine);
  --ds-feld-rand: #7d8aa0;
  --ds-fertig-bg: #12703c;
  --ds-datum-bg: var(--v3-marine);
  --ds-datum-ring: transparent;
  /* Lookbook-Namen als Verweis (ein Wert, zwei Namen bis S1 die Bauteile vereinheitlicht) */
  --v3-f-text: var(--v3-font);
  --p-schatten-hoch: var(--v3-shadow-hoch);
  --ds-fokus: var(--v3-fokus);
  color-scheme: light;
}

/* ── DUNKEL (System) — deckungsgleich mit dem Umschalter-Block darunter ── */
@media (prefers-color-scheme: dark) {
  html[data-ui="neu"]:not([data-theme="light"]), html[data-ui="neu"]:not([data-theme="light"]) .v3-page {
    --v3-canvas: #0c1320;
    --v3-card: #131c2b;
    --v3-card2: #172234;
    --v3-hover: #18233a;
    --v3-sel: #19294a;
    --v3-mut-soft: #1a2436;
    --v3-line: #243149;
    --v3-line2: #1d2940;
    --v3-ink: #e7edf6;
    --v3-ink2: #a9b6ca;
    --v3-ink3: #7586a0;
    --v3-ink3-text: #8392ac;
    --v3-brand: #6d9bf5;
    --v3-brand-soft: #1b2b4a;
    --v3-brand-line: #2f4a7c;
    --v3-brand-deep: #0a1a33;
    --v3-marine: #0b2d5e;
    --v3-ok: #44c486;
    --v3-ok-soft: #12301f;
    --v3-ok-text: var(--v3-ok);
    --v3-warn: #e6a640;
    --v3-warn-soft: #33270f;
    --v3-warn-text: var(--v3-warn);
    --v3-bad: #f07884;
    --v3-bad-soft: #3a1a20;
    --v3-bad-text: var(--v3-bad);
    --v3-akzent-hellblau: #4cc3ec;
    --v3-akzent-hellblau-soft: #0f2b3a;
    --v3-akzent-hellblau-text: var(--v3-akzent-hellblau);
    --v3-akzent-petrol: #4fb8c0;
    --v3-akzent-petrol-soft: #0f2a2e;
    --v3-akzent-petrol-text: var(--v3-akzent-petrol);
    --v3-akzent-tuerkis: #3cc8d4;
    --v3-akzent-tuerkis-soft: #0e2c31;
    --v3-akzent-tuerkis-text: var(--v3-akzent-tuerkis);
    --v3-akzent-orange: #f28a52;
    --v3-akzent-orange-soft: #36200f;
    --v3-akzent-orange-text: var(--v3-akzent-orange);
    --v3-akzent-hellgrau: #243149;
    --v3-diag-2: #00aab9;
    --v3-diag-3: #eb5a0a;
    --v3-diag-4: #4fb8c0;
    --v3-diag-5: #a29795;
    --v3-diag-6: #00a5dc;
    --v3-plat: #a78bfa;
    --v3-claude: #e9895f;
    --v3-claude-soft: #33201a;
    --v3-claude-text: var(--v3-claude);
    --v3-sb: #08172f;
    --v3-sb-mut: #9db6d8;
    --v3-sb-active: #12305e;
    --v3-top-bg: rgba(15,22,36,.86);
    --v3-shadow: 0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    --v3-shadow-hoch: 0 2px 6px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.45);
    --v3-karte-rand: #1d2940;
    --p-marine-2: #061a39;
    --p-bordeaux: #9c2a42;
    --p-rb-text: #d0909d;
    --p-rb-soft: rgba(208,144,157,.1);
    --p-knopf: #3d6ab3;
    --p-knopf-hover: #345c9c;
    --ds-skelett: #1b2638;
    --ds-skelett-licht: #24324a;
    --ds-akzent-text: #a9c4fa;
    --ds-feld-rand: #64748e;
    --ds-datum-bg: #2f4a7c;
    --ds-datum-ring: var(--v3-brand);
    color-scheme: dark;
  }
}

/* ── DUNKEL (Umschalter Hell/Dunkel/System) ── */
html[data-ui="neu"][data-theme="dark"], html[data-ui="neu"][data-theme="dark"] .v3-page {
  --v3-canvas: #0c1320;
  --v3-card: #131c2b;
  --v3-card2: #172234;
  --v3-hover: #18233a;
  --v3-sel: #19294a;
  --v3-mut-soft: #1a2436;
  --v3-line: #243149;
  --v3-line2: #1d2940;
  --v3-ink: #e7edf6;
  --v3-ink2: #a9b6ca;
  --v3-ink3: #7586a0;
  --v3-ink3-text: #8392ac;
  --v3-brand: #6d9bf5;
  --v3-brand-soft: #1b2b4a;
  --v3-brand-line: #2f4a7c;
  --v3-brand-deep: #0a1a33;
  --v3-marine: #0b2d5e;
  --v3-ok: #44c486;
  --v3-ok-soft: #12301f;
  --v3-ok-text: var(--v3-ok);
  --v3-warn: #e6a640;
  --v3-warn-soft: #33270f;
  --v3-warn-text: var(--v3-warn);
  --v3-bad: #f07884;
  --v3-bad-soft: #3a1a20;
  --v3-bad-text: var(--v3-bad);
  --v3-akzent-hellblau: #4cc3ec;
  --v3-akzent-hellblau-soft: #0f2b3a;
  --v3-akzent-hellblau-text: var(--v3-akzent-hellblau);
  --v3-akzent-petrol: #4fb8c0;
  --v3-akzent-petrol-soft: #0f2a2e;
  --v3-akzent-petrol-text: var(--v3-akzent-petrol);
  --v3-akzent-tuerkis: #3cc8d4;
  --v3-akzent-tuerkis-soft: #0e2c31;
  --v3-akzent-tuerkis-text: var(--v3-akzent-tuerkis);
  --v3-akzent-orange: #f28a52;
  --v3-akzent-orange-soft: #36200f;
  --v3-akzent-orange-text: var(--v3-akzent-orange);
  --v3-akzent-hellgrau: #243149;
  --v3-diag-2: #00aab9;
  --v3-diag-3: #eb5a0a;
  --v3-diag-4: #4fb8c0;
  --v3-diag-5: #a29795;
  --v3-diag-6: #00a5dc;
  --v3-plat: #a78bfa;
  --v3-claude: #e9895f;
  --v3-claude-soft: #33201a;
  --v3-claude-text: var(--v3-claude);
  --v3-sb: #08172f;
  --v3-sb-mut: #9db6d8;
  --v3-sb-active: #12305e;
  --v3-top-bg: rgba(15,22,36,.86);
  --v3-shadow: 0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --v3-shadow-hoch: 0 2px 6px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.45);
  --v3-karte-rand: #1d2940;
  --p-marine-2: #061a39;
  --p-bordeaux: #9c2a42;
  --p-rb-text: #d0909d;
  --p-rb-soft: rgba(208,144,157,.1);
  --p-knopf: #3d6ab3;
  --p-knopf-hover: #345c9c;
  --ds-skelett: #1b2638;
  --ds-skelett-licht: #24324a;
  --ds-akzent-text: #a9c4fa;
  --ds-feld-rand: #64748e;
  --ds-datum-bg: #2f4a7c;
  --ds-datum-ring: var(--v3-brand);
  color-scheme: dark;
}