/*
 * Stil „Graphite Glow / Dark Ink“ (UI/UX-Designsystem 2026-10-08, Briefing §6): matte, satinierte Graphitflächen, feine
 * Kanten, minimale Kantenlichter, Akzente wie farbige Tinte - KEINE Neon-Glows, keine Glasoptik. Immer dunkel
 * (assets/js/ui_config.js setzt data-theme="dark").
 * Farben: die sechs Akzentprofile (Ember, Aqua, Pulse, Signal, Ice, Volt; <html data-accent>) laufen in assets/js/palette.js
 * durch dieselbe derive()-Kontrastabsicherung wie die 50 Paletten und landen als Tokens am <html>. Eine gewählte Palette hat
 * Vorrang - dieser Stil liefert dann nur das Material. Die Werte unten sind nur der Rückfall ohne JavaScript (Ember).
 * Recherche: docs/reports/UIUX Designsystem Recherche 2026-10.md §4 (keine reinen Schwarz-/Weißwerte, Erhebung über hellere
 * Töne + 1-px-Kantenlicht, da #1C1E21 und #26292D sich nur 1,14:1 unterscheiden; Schrift auf hellen Akzenten dunkel).
 */
:root[data-design="graphite"] {
  color-scheme: dark;
  --c-bg: #1c1e21; --c-surface: #1c1e21; --c-surface-2: #24272b;
  --c-ink: #e7e5e2; --c-ink-2: #d2d0cd; --c-muted: #a3a6ab; --c-muted-deep: #a3a6ab; --c-line: #34373c;
  --c-brand: #ff6a3d; --c-brand-ink: #000000; --c-brand-deep: #ff8a66; --c-brand-soft: #3a2621;
  /* Material: Erhebung über hellere Töne, Kantenlicht oben, weiche Tiefe darunter */
  --gg-raise: color-mix(in srgb, var(--c-bg) 94%, #ffffff);
  --gg-raise-2: color-mix(in srgb, var(--c-bg) 90%, #ffffff);
  --gg-edge: rgba(255, 255, 255, .075);
  --gg-edge-top: rgba(255, 255, 255, .09);
  --nm-light: transparent; --nm-dark: rgba(0, 0, 0, .45);
  --nm-1: inset 0 1px 0 var(--gg-edge-top), 0 0 0 1px var(--gg-edge), 0 1px 2px rgba(0, 0, 0, .35);
  --nm-2: inset 0 1px 0 var(--gg-edge-top), 0 0 0 1px var(--gg-edge), 0 10px 26px -8px rgba(0, 0, 0, .55);
  --nm-3: inset 0 1px 0 var(--gg-edge-top), 0 0 0 1px var(--gg-edge), 0 22px 48px -12px rgba(0, 0, 0, .65);
  --nm-in: inset 0 1px 2px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--gg-edge);
  --nm-in-deep: inset 0 2px 4px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--gg-edge);
  --nm-face: linear-gradient(180deg, var(--gg-raise-2) 0%, var(--gg-raise) 100%);
  --nm-face-in: linear-gradient(180deg, var(--c-surface-2) 0%, var(--gg-raise) 100%);
  --nm-brand-face: var(--c-brand); --nm-brand-face-in: var(--c-brand-deep); --nm-brand-dark: transparent;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
  --cube-halo: rgba(0, 0, 0, .9); --cube-halo-wide: transparent;
}
/* Satinierter Grund: kaum sichtbarer Verlauf (keine Fläche reines Schwarz) */
:root[data-design="graphite"] body { background: linear-gradient(180deg, var(--gg-raise) 0, var(--c-bg) 420px) var(--c-bg) no-repeat; }
:root[data-design="graphite"] .app-header { background: var(--gg-raise); box-shadow: inset 0 -1px 0 var(--gg-edge), 0 6px 18px -10px rgba(0, 0, 0, .6); }
/* Karten und Fenster: ruhige Panels mit Kantenlicht */
:root[data-design="graphite"] .card, :root[data-design="graphite"] .ws-card, :root[data-design="graphite"] .pop-panel,
:root[data-design="graphite"] .ws-home__icon, :root[data-design="graphite"] .ws-card__icon { background: var(--nm-face); }
:root[data-design="graphite"] .ws-card:hover { box-shadow: inset 0 1px 0 var(--gg-edge-top), 0 0 0 1px color-mix(in srgb, var(--c-brand) 45%, transparent), 0 10px 26px -8px rgba(0, 0, 0, .55); }
/* Knöpfe: flach-matt; Hauptknopf in Akzent-Tinte (Schrift darauf aus palette.js, meist dunkel) */
:root[data-design="graphite"] .btn--primary { background: var(--c-brand); color: var(--c-brand-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .4); }
:root[data-design="graphite"] .chip--on, :root[data-design="graphite"] .chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-brand) 60%, transparent); }
/* Eingaben vertieft */
:root[data-design="graphite"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), :root[data-design="graphite"] select, :root[data-design="graphite"] textarea { background: var(--c-surface-2); }
/* Fokus: klare Tinte-Linie statt Schein */
:root[data-design="graphite"] :focus-visible { outline-color: var(--c-brand); }
/* Kennzahlen / Zahlen: präzise, gleiche Ziffernbreite */
:root[data-design="graphite"] body { font-variant-numeric: tabular-nums; }
:root[data-design="graphite"] hr, :root[data-design="graphite"] .person-menu__sep { background: var(--gg-edge); border: 0; height: 1px; }