/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — ui.prefers
   Layer: @layer ui.prefers
   Controls theme (light/dark), motion (normal/reduce), and density.
   Genesis-Final | Bus-Linked | Palette-Aware | Safe Fallbacks
   ─────────────────────────────────────────────────────────────── */
@layer ui.prefers {
  /* ─── Theme Modes ───────────────────────────────────────────── */
  html[data-theme="light"] {
    --ui-bg: #ffffff;
    --ui-fg: #111111;
    --ui-accent: #ff5555;
    color-scheme: light;
  }

  html[data-theme="dark"] {
    --ui-bg: #0b0b0b;
    --ui-fg: #f2f2f2;
    --ui-accent: #ff4444;
    color-scheme: dark;
  }

  /* ─── Motion Preference ─────────────────────────────────────── */
  [data-motion="reduce"] * {
    transition: none !important;
    animation: none !important;
  }

  /* ─── Density Scale ─────────────────────────────────────────── */
  :root {
    --ui-density: 1;
  }

  [data-density="compact"] {
    --ui-density: 0.85;
  }

  [data-density="cozy"] {
    --ui-density: 1.1;
  }

  /* ─── Base Application Layer ────────────────────────────────── */
  body {
    background: var(--ui-bg);
    color: var(--ui-fg);
    transition: background 0.3s ease, color 0.3s ease;
  }

  /* ─── Integration Hooks ─────────────────────────────────────── */
  body[data-theme="dark"][data-motion="reduce"] {
    transition: none !important;
  }

  html[data-theme][data-density][data-motion] body::before {
    content: "";
    display: none; /* used by diagnostics for state detection */
  }
}