/* panel.css — v2 Panel- und Utility-Primitives.
   .lod-surface = kanonische Flächen-Primitive (Karten/Kacheln/Panels).
   .panel = generischer Bordered-Container (baut auf der Surface-Sprache auf).
   .muted = sekundaerer Text-Tone. */

/* ——— Flächen-SSOT ———
   .lod-surface ist die eine Karten-/Kachel-/Panel-Fläche. Neuer Code
   komponiert daraus (Klasse anhängen), statt radius/border/bg selbst zu
   setzen. Modifier: --flat (kein Shadow), --raised (Ruhe-Shadow),
   --hoverable (Hover-Elevation), --accent (3px Links-Spine via --surface-accent
   Farbe). Token-Quelle: tokens.css (--surface-*). */
.lod-surface {
  background: var(--surface-bg);
  border: var(--surface-border);
  border-radius: var(--surface-radius);
  box-sizing: border-box;
}
.lod-surface--raised { box-shadow: var(--surface-shadow); }
.lod-surface--hoverable { transition: box-shadow var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft); }
.lod-surface--hoverable:hover { box-shadow: var(--surface-shadow-hover); border-color: var(--color-border-hover); }
.lod-surface--accent { border-left: var(--surface-accent-width) solid var(--surface-accent, var(--brand-default)); }

.app-scope .panel {
  background: var(--surface-bg);
  border: var(--surface-border);
  border-radius: var(--surface-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ——— Utility ——— */

.app-scope .muted { color: var(--lod-gray-500); }