/**
 * OpenHeart Engineered Design System Tokens — Dark Palette
 * Deep slate palette with calibrated luminance steps for zero eye strain
 */
body.dark-theme, [data-theme="dark"] {
  /* ── 1. Elevation & Background Surface Hierarchy ── */
  --bg-app: #080C14;                  /* True deep canvas base */
  --bg-surface: #0E1422;              /* Primary workspace cards (sidebar, canvas, inspector) */
  --bg-subtle: #161F32;               /* Secondary inputs, toolbars, search bar */
  --bg-muted: #1E293B;                /* Inactive pressed fills, badges, divider tracks */
  --bg-card: #0E1422;
  --bg-hover: #1C273F;                /* Interactive hover state */
  --bg-active: #1E3A8A;               /* Selected/active state fill */
  --bg-elevated: rgba(14, 20, 34, 0.88); /* Floating HUD, popovers, dropdowns */
  --bg-header: rgba(14, 20, 34, 0.90);
  --bg-footer: rgba(14, 20, 34, 0.90);
  --bg-canvas: #080C14;
  --bg-floating: rgba(14, 20, 34, 0.88);
  --bg-backdrop: rgba(0, 0, 0, 0.65);

  /* Tree & Editor Specific */
  --bg-tree: #0E1422;
  --bg-tree-header: #131A2B;
  --bg-tree-hover: #182238;
  --bg-tree-active: #172A4E;
  --bg-tabs: #131A2B;
  --bg-tab-active: #0E1422;
  --bg-badge: #1E293B;
  --bg-breadcrumb: #131A2B;
  --bg-slider: #161F32;

  /* ── 2. Unified Border System (Crisp, High-Precision Contrast) ── */
  --border-subtle: #182336;           /* Hairline internal dividers (1px) */
  --border-default: #22304A;          /* Standard component perimeter border (card borders, headers) */
  --border-light: #22304A;            /* Backward-compatible alias */
  --border-medium: #2D3E5E;           /* Interactive control borders (buttons, inputs) */
  --border-strong: #3D537D;           /* High-contrast control borders */
  --border-hover: #38BDF8;            /* Subtle interactive hover highlight */
  --border-focus: #38BDF8;            /* Active focus ring */
  --border-slider: #2D3E5E;

  /* ── 3. High-Contrast Typography Hierarchy ── */
  --text-main: #F8FAFC;               /* Pure readable high-contrast text */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;          /* Secondary body text & readable labels */
  --text-muted: #94A3B8;              /* Subtitles, secondary pill labels */
  --text-faint: #64748B;              /* Meta descriptions, timestamps, placeholders */
  --text-disabled: #475569;
  --text-inverse: #080C14;            /* Text on bright buttons or badges */
  --text-badge: #CBD5E1;
  --text-tree-folder: #E2E8F0;
  --text-tree-file: #F8FAFC;
  --text-tree-active: #60A5FA;
  --text-breadcrumb-root: #64748B;
  --text-breadcrumb-pkg: #38BDF8;
  --text-breadcrumb-file: #F8FAFC;

  /* ── 4. Accent & Semantic Color Palette ── */
  --accent-blue: #38BDF8;
  --accent-blue-hover: #0EA5E9;
  --accent-blue-subtle: rgba(56, 189, 248, 0.14);
  --accent-blue-border: rgba(56, 189, 248, 0.35);

  --accent-purple: #A78BFA;
  --accent-purple-subtle: rgba(167, 139, 250, 0.14);

  --accent-emerald: #34D399;
  --accent-emerald-subtle: rgba(52, 211, 153, 0.14);
  --accent-emerald-border: rgba(52, 211, 153, 0.35);

  --accent-amber: #FBBF24;
  --accent-amber-subtle: rgba(251, 191, 36, 0.14);

  --accent-rose: #F87171;
  --accent-rose-subtle: rgba(248, 113, 113, 0.14);

  /* ── 5. Canvas Grid Patterns ── */
  --canvas-grid-dot: rgba(255, 255, 255, 0.14);
  --canvas-grid-line: rgba(255, 255, 255, 0.025);

  /* ── 6. Elevation Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 16px -2px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 20px 48px -4px rgba(0, 0, 0, 0.75), 0 8px 16px rgba(0, 0, 0, 0.5);
}