/* Local sketch only. Neutral surfaces sampled from the Interfere Inbox illustration.
   Page: oklch(15% 0 0), shell: #111, raised card: #191919,
   divider: white at 7%. Keep Pleo's semantic and chart colors. */
html.dark,
html.dark .demo-root,
html.dark .demo-root .app-panel {
  --background: 0 0% 3.92%;
  --background-page: 0 0% 3.92%;
  --background-surface-50: 0 0% 3.92%;
  --background-surface-75: 0 0% 6.67%;
  --background-surface-100: 0 0% 9.8%;
  --background-surface-200: 0 0% 6.67%;
  --background-surface-300: 0 0% 13.33%;
  --background-surface-400: 0 0% 16%;
  --background-control: 0 0% 13.33%;
  --background-button-default: 0 0% 9.8%;
  --background-overlay-default: 0 0% 9.8%;
  --background-overlay-hover: 0 0% 13.33%;
  --background-muted: 0 0% 6.67%;
  --card: 0 0% 9.8%;
  --popover: 0 0% 9.8%;
  --secondary: 0 0% 13.33%;
  --muted: 0 0% 13.33%;
  --accent: 0 0% 13.33%;
  --border-default: 0 0% 100% / .07;
  --border-secondary: 0 0% 100% / .07;
  --border-muted: 0 0% 100% / .05;
  --border-strong: 0 0% 100% / .12;
  --border-control: 0 0% 100% / .10;
  --border-button-default: 0 0% 100% / .10;
  --border-button-hover: 0 0% 100% / .16;
  --border: 0 0% 100% / .07;
  --input: 0 0% 100% / .10;
}
html.dark .demo-main { background:oklch(15% 0 0);box-shadow:none; }
html.dark .demo-root,
html.dark .demo-topbar,
html.dark .demo-sidebar { background:#111; }
html.dark .demo-root [data-dashboard-card] { background:#191919;border-color:#ffffff12;box-shadow:none; }
html.dark .demo-root [data-dashboard-card]>div:first-child { border-color:#ffffff12; }
html.dark .demo-root .demo-icon.is-active { background:#222;border-color:#ffffff12; }