/* ─────────────────────────────────────────────────────────────────────────────
   49-surface-language.css — Phase 0 (Tokens + Tier-Klassen, additiv).

   Diese Datei legt das Vokabular für den system-weiten Shape-Language-Overhaul
   an. Sie veraendert per se NICHTS am sichtbaren UI — es werden ausschliesslich
   neue Custom Properties und neue Klassen definiert. Bestehende Klassen
   (.mb-fin__card, .set-section, .sc-aside, etc.) werden NICHT targetiert.

   Geladen NACH 47-design-refinement.css und VOR 62-app-relaunch.css. Damit
   liegen die Tier-Klassen unter den Per-Page-Overrides der Relaunch-Schicht —
   bewusst: die Tier-Klassen sollen vom Cascade-System richtig vererbt werden,
   sobald in spaeteren Phasen Markup auf sie umgestellt wird.

   Alle Regeln sind ueber html[data-design="v2"] gegated, damit Login,
   Marketing und sonstige Public-Pages unberuehrt bleiben.

   Keine !important. Keine page-spezifischen Tweaks. Keine Re-Defines
   vorhandener Tokens. Reine additive Grundlage.
──────────────────────────────────────────────────────────────────────────── */

/* ═══ Tokens ═══════════════════════════════════════════════════════════════
   Naming-Konvention:
     --r-*               Radius-Skala (6 Stufen)
     --surface-border-*  Border-Helligkeit (3 Stufen)
     --shadow-*          Elevation-Skala (4 Stufen, 0..3)
     --eyebrow-*         Mikrolabels fuer Gruppentitel innerhalb Surfaces

   Werte siehe Plan Part B. Bewusst nicht in :root global definiert, sondern
   gegated, damit nur v2-Pages die neue Sprache bekommen.
*/
html[data-design="v2"] {
  /* Radius-Skala — sechs Werte, mehr nicht. */
  --r-0:    0px;
  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* Border-Helligkeit. Drei Stufen, alle warm-petrol kompatibel. */
  --surface-border:        rgba(28, 42, 36, .08);
  --surface-border-strong: rgba(28, 42, 36, .14);
  --surface-border-accent: rgba(14, 143, 131, .28);

  /* Elevation. 0 = kein Shadow, 3 = Modal/Dropdown. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(28, 42, 36, .04);
  --shadow-2: 0 4px 14px -6px rgba(28, 42, 36, .10);
  --shadow-3: 0 12px 32px -12px rgba(28, 42, 36, .22);

  /* Eyebrow-Mikrolabels (Section-Header innerhalb T3-Bloecken). */
  --eyebrow-size: 11px;
  --eyebrow-weight: 700;
  --eyebrow-tracking: .06em;
  --eyebrow-color: rgba(28, 42, 36, .54);
}

/* Dark-Theme-Parallel: gleiche Namen, neu kalibrierte Werte.
   data-theme="light" ist der Default in app.html; "dark" ist optional. */
html[data-design="v2"][data-theme="dark"] {
  --surface-border:        rgba(255, 255, 255, .06);
  --surface-border-strong: rgba(255, 255, 255, .12);
  --surface-border-accent: rgba(110, 226, 204, .32);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-2: 0 6px 18px -8px rgba(0, 0, 0, .45);
  --shadow-3: 0 16px 36px -14px rgba(0, 0, 0, .60);

  --eyebrow-color: rgba(255, 255, 255, .52);
}


/* ═══ Tier-Klassen ═════════════════════════════════════════════════════════
   Pro Tier eine Klasse. Bewusst opt-in via Markup; kein automatisches
   Anwenden auf bestehende Selektoren. Damit kann ein Element zur Migration
   neben seiner alten Klasse fuer eine Phase die neue Tier-Klasse tragen
   ("doppelt-deklariert") und der alte Look bleibt erhalten, bis die alten
   62-Regeln in der jeweiligen Phase entfernt werden.

   Hintergrundfarben werden ueber die existierenden semantischen Aliasse
   (--surface, --surface-elevated) bezogen — beide sind in 45-modern-premium
   definiert. So bleiben Light/Dark automatisch konsistent. */

/* ── T1 — Primary Workspace Panel ──────────────────────────────────────── */
html[data-design="v2"] .mb-surface-t1 {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 24px 26px;
}

/* ── T2 — Secondary Panel (Sidebars, Right-Rails, Sub-Workspaces) ─────── */
html[data-design="v2"] .mb-surface-t2 {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 18px 20px;
}

/* ── T3 — Section inside Panel ─────────────────────────────────────────
   KEINE eigene Surface. Nur vertikale Padding-Rhythm und optionaler
   Top-Trenner zwischen Gruppen.
*/
html[data-design="v2"] .mb-surface-t3 {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 0;
}
html[data-design="v2"] .mb-surface-t3 + .mb-surface-t3 {
  border-top: 1px solid var(--surface-border);
}

/* ── T4 — Hero / Command Bar ──────────────────────────────────────────── */
html[data-design="v2"] .mb-surface-t4 {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: 22px 26px;
}

/* ── T5 — List / Table Container ─────────────────────────────────────── */
html[data-design="v2"] .mb-surface-t5 {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 0;
  overflow: hidden;
}

/* ── T6 — List Row (innerhalb T5) ──────────────────────────────────────
   Nur unten ein Trenner; keine eigene Surface. Letzte Reihe ohne Trenner. */
html[data-design="v2"] .mb-surface-t6 {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--surface-border-strong);
  border-radius: 0;
  padding: 14px 18px;
}
html[data-design="v2"] .mb-surface-t6:last-child { border-bottom: 0; }
html[data-design="v2"] .mb-surface-t6:hover     { background: rgba(14, 143, 131, .04); }

/* ── T7 — Insert Box (innerhalb T3, z.B. Code/Preview/Hinweis) ─────── */
html[data-design="v2"] .mb-surface-t7 {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-md);
  box-shadow: none;
  padding: 12px 14px;
}

/* ── T8 — Danger / Restore Zone (Footer-Bars in Dossiers) ────────────
   Bewusst KEIN eigener Radius — die Zone soll mit der Eltern-T1 die
   unteren Ecken teilen. Border nur oben.
   Variants ueber Data-Attribut, damit nur eine Klasse das Schema kennt. */
html[data-design="v2"] .mb-surface-t8 {
  background: var(--surface);
  border: 0;
  border-top: 1px solid var(--surface-border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
html[data-design="v2"] .mb-surface-t8[data-tone="danger"] {
  background:
    linear-gradient(180deg, rgba(255, 251, 243, .96), rgba(255, 247, 232, .86)),
    linear-gradient(135deg, rgba(212, 148, 58, .05), transparent 60%);
  border-top-color: rgba(212, 148, 58, .22);
}
html[data-design="v2"] .mb-surface-t8[data-tone="restore"] {
  background:
    linear-gradient(180deg, rgba(244, 253, 251, .96), rgba(232, 250, 245, .86)),
    linear-gradient(135deg, rgba(14, 143, 131, .06), transparent 60%);
  border-top-color: rgba(14, 143, 131, .24);
}


/* ═══ Strukturelle Helfer ══════════════════════════════════════════════════ */

/* Rail: Sidebar-Struktur, die mehrere Gruppen ohne Doppel-Frame buendelt.
   Erbt T2-Surface. Innen wohnen .mb-rail__group Bloecke. */
html[data-design="v2"] .mb-rail {
  /* Komponiert ueber T2-Klasse im Markup; hier nur Layout-Defaults. */
  display: flex;
  flex-direction: column;
  gap: 4px;
}
html[data-design="v2"] .mb-rail__group {
  padding: 14px 0;
}
html[data-design="v2"] .mb-rail__group + .mb-rail__group {
  border-top: 1px solid var(--surface-border);
}
html[data-design="v2"] .mb-rail__group:first-child { padding-top: 4px; }
html[data-design="v2"] .mb-rail__group:last-child  { padding-bottom: 4px; }
html[data-design="v2"] .mb-rail__group-eyebrow {
  display: block;
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--eyebrow-color);
  margin: 0 0 8px;
}

/* Eyebrow standalone (z.B. fuer Form-Gruppen ausserhalb von Rails). */
html[data-design="v2"] .mb-eyebrow {
  display: inline-block;
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--eyebrow-color);
}

/* Tabs: Underline-Style fuer Page-Sektion-Navigation
   (im Unterschied zu Filter-Pills, die Pill-Form behalten). */
html[data-design="v2"] .mb-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--surface-border-strong);
}
html[data-design="v2"] .mb-tabs__item {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--eyebrow-color);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
html[data-design="v2"] .mb-tabs__item:hover {
  color: rgba(28, 42, 36, .82);
}
html[data-design="v2"] .mb-tabs__item[aria-selected="true"],
html[data-design="v2"] .mb-tabs__item[data-active="true"] {
  color: rgba(28, 42, 36, 1);
  border-bottom-color: var(--surface-border-accent);
}

/* Liste/Row-Container — eigene semantische Klassen, alias zu T5/T6 fuer
   Pages, die ueber Naming klarer kommunizieren wollen. */
html[data-design="v2"] .mb-list { /* Identisch zu T5 — kompositorisch im Markup. */ }
html[data-design="v2"] .mb-list__row { /* Identisch zu T6 — kompositorisch im Markup. */ }


/* ═══ Hinweis fuer spaetere Phasen ═════════════════════════════════════════
   In Phase 1-5 werden Markup-Sites schrittweise auf die Tier-Klassen
   umgestellt UND die jeweiligen aelteren 62-app-relaunch-Selektoren
   parallel deaktiviert. Phase 0 berührt 62 nicht.
──────────────────────────────────────────────────────────────────────────── */