/* =========================================================
   ZAR AI v2 — THEME MAPPING

   Both blocks below are scoped to `.zar-v2[data-zar-v2-theme="…"]`
   — never `:root`, `html`, or `body`. This is the file that
   proves the host page is unaffected: nothing here can leak
   outside an element carrying the `.zar-v2` class.

   `.zar-v2[data-zar-v2-theme="dark"]` mirrors semantic.css's own
   `.zar-v2` defaults verbatim (dark is v2's hero/default look,
   so a root that never gets an explicit theme attribute still
   renders correctly) — kept as its own explicit block so the
   dark mapping sits legibly next to light's, rather than being
   implicit. `data-zar-v2-theme` is set by zar-v2-ui.js on
   the single `.zar-v2` root element (see index.html) and
   defaults to "dark" on load.
========================================================= */

.zar-v2[data-zar-v2-theme="dark"] {
  --zar-v2-bg-canvas:        var(--zar-v2-neutral-950);
  --zar-v2-bg-canvas-end:    var(--zar-v2-neutral-900);
  --zar-v2-bg-surface:       var(--zar-v2-neutral-850);
  --zar-v2-bg-surface-raised:var(--zar-v2-neutral-800);
  --zar-v2-bg-surface-sunken:var(--zar-v2-neutral-900);
  --zar-v2-bg-overlay:       rgba(8, 9, 14, 0.62);
  --zar-v2-bg-scrim:         rgba(4, 5, 9, 0.55);

  --zar-v2-text-primary:   var(--zar-v2-neutral-50);
  --zar-v2-text-secondary: var(--zar-v2-neutral-200);
  --zar-v2-text-muted:     var(--zar-v2-neutral-400);
  --zar-v2-text-on-accent: #ffffff;

  --zar-v2-border-subtle: rgba(255, 255, 255, 0.08);
  --zar-v2-border-strong: rgba(255, 255, 255, 0.16);
  --zar-v2-border-focus:  var(--zar-v2-violet-300);

  --zar-v2-accent:        var(--zar-v2-violet-400);
  --zar-v2-accent-strong: var(--zar-v2-violet-500);
  --zar-v2-accent-soft:   rgba(130, 133, 239, 0.16);
  --zar-v2-accent-softer: rgba(130, 133, 239, 0.09);
  --zar-v2-trash-occupied-accent: #c98999;
  --zar-v2-trash-occupied-hover:  #dda1ae;
  --zar-v2-trash-restore-accent:  #7dbce8;
  --zar-v2-trash-restore-hover:   #9bcff0;
  --zar-v2-focus-ring:    0 0 0 3px rgba(163, 166, 246, 0.45);

  --zar-v2-orb-halo:          radial-gradient(circle, rgba(79, 145, 255, 0.26), rgba(169, 92, 244, 0.09) 55%, transparent 72%);
  --zar-v2-orb-active-border: var(--zar-v2-border-focus);

  --zar-v2-user-message-bg:          rgba(130, 133, 239, 0.16);
  --zar-v2-user-message-border:      rgba(163, 166, 246, 0.28);
  --zar-v2-user-message-text:        var(--zar-v2-neutral-50);
  --zar-v2-assistant-message-bg:     var(--zar-v2-neutral-800);
  --zar-v2-assistant-message-border: var(--zar-v2-border-subtle);
  --zar-v2-assistant-message-text:   var(--zar-v2-neutral-100);

  --zar-v2-knowledge-bg:     rgba(63, 188, 214, 0.08);
  --zar-v2-knowledge-border: rgba(111, 214, 232, 0.30);
  --zar-v2-knowledge-accent: var(--zar-v2-cyan-300);
  --zar-v2-knowledge-text:   var(--zar-v2-neutral-100);

  --zar-v2-grid-line: rgba(255, 255, 255, 0.028);

  --zar-v2-scrollbar-thumb:       rgba(255, 255, 255, 0.16);
  --zar-v2-scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
  --zar-v2-compact-history-scrollbar-active: rgba(196, 198, 251, 0.30);

  --zar-v2-chat-active-bg: var(--zar-v2-accent-soft);
  --zar-v2-chat-active-marker: transparent;
  --zar-v2-transient-bg: var(--zar-v2-bg-surface-raised);
  --zar-v2-rename-bg: var(--zar-v2-bg-surface-raised);
  --zar-v2-undo-bg: var(--zar-v2-bg-surface-raised);
  --zar-v2-dialog-bg: var(--zar-v2-bg-surface-raised);
}

/* =========================================================
   LIGHT THEME

   Not "light website + light ZAR" — a deliberately cooler,
   more defined shell than ZAR AI v1's own light theme. Pale
   periwinkle surfaces (never flat white — that's the HOST
   canvas's job, not v2's), a darker/cooler blue-violet accent
   than v1's pink-forward identity, visible shell boundaries,
   and the same restrained cyan used for governed knowledge as
   in dark mode.
========================================================= */
.zar-v2[data-zar-v2-theme="light"] {
  /* COMMENT BLOCK
     PATCH: Restrained pastel surface depth
     NAME: ZAR AI v2
     DATE: 2026-09-06
     TIME: 13:21
     WHY: Differentiate light-theme conversational and transient surfaces without changing the grid canvas. */
  --zar-v2-bg-canvas:        #eef0fb;
  --zar-v2-bg-canvas-end:    #e5e8f9;
  --zar-v2-bg-surface:       #f8f9fe;
  --zar-v2-bg-surface-raised:#eef0fb;
  --zar-v2-bg-surface-sunken:#e3e6f7;
  --zar-v2-bg-overlay:       rgba(30, 32, 54, 0.30);
  --zar-v2-bg-scrim:         rgba(20, 22, 40, 0.34);

  --zar-v2-text-primary:   #1a1c2e;
  --zar-v2-text-secondary: #4d5170;
  --zar-v2-text-muted:     #7d81a0;
  --zar-v2-text-on-accent: #ffffff;

  --zar-v2-border-subtle: rgba(26, 28, 46, 0.11);
  --zar-v2-border-strong: rgba(26, 28, 46, 0.20);
  --zar-v2-border-focus:  var(--zar-v2-violet-600);

  --zar-v2-accent:        var(--zar-v2-violet-600);
  --zar-v2-accent-strong: var(--zar-v2-violet-700);
  --zar-v2-accent-soft:   rgba(77, 79, 209, 0.11);
  --zar-v2-accent-softer: rgba(77, 79, 209, 0.06);
  --zar-v2-trash-occupied-accent: #c97880;
  --zar-v2-trash-occupied-hover:  #b9626c;
  --zar-v2-trash-restore-accent:  #4b91c4;
  --zar-v2-trash-restore-hover:   #327dad;
  --zar-v2-focus-ring:    0 0 0 3px rgba(77, 79, 209, 0.30);

  --zar-v2-orb-halo:          radial-gradient(circle, rgba(79, 145, 255, 0.20), rgba(169, 92, 244, 0.07) 55%, transparent 72%);
  --zar-v2-orb-active-border: var(--zar-v2-border-focus);

  --zar-v2-user-message-bg:          #dddaf3;
  --zar-v2-user-message-border:      rgba(77, 79, 209, 0.24);
  --zar-v2-user-message-text:        #1a1c2e;
  --zar-v2-assistant-message-bg:     #eeedf4;
  --zar-v2-assistant-message-border: var(--zar-v2-border-subtle);
  --zar-v2-assistant-message-text:   #262a44;

  --zar-v2-knowledge-bg:     rgba(15, 122, 146, 0.07);
  --zar-v2-knowledge-border: rgba(15, 122, 146, 0.28);
  --zar-v2-knowledge-accent: var(--zar-v2-cyan-600);
  --zar-v2-knowledge-text:   #1c2a3a;

  --zar-v2-grid-line: rgba(26, 28, 46, 0.04);

  --zar-v2-scrollbar-thumb:       rgba(26, 28, 46, 0.18);
  --zar-v2-scrollbar-thumb-hover: rgba(26, 28, 46, 0.30);
  --zar-v2-compact-history-scrollbar-active: rgba(77, 79, 209, 0.30);

  --zar-v2-chat-active-bg: #ced1f0;
  --zar-v2-chat-active-marker: rgba(77, 79, 209, 0.42);
  --zar-v2-transient-bg: #e8e2f2;
  --zar-v2-rename-bg: #e1eaf1;
  --zar-v2-undo-bg: #e7e1ef;
  --zar-v2-dialog-bg: #e9eaf4;
}