/* =========================================================
   ZAR AI v2 — SEMANTIC TOKENS

   CRITICAL SCOPING RULE (2026-09 refinement): every rule in
   this file is scoped to `.zar-v2`, NEVER `:root`, `html`, or
   `body`. The dark/light switch is a ZAR AI v2 preference, not
   a host-page theme — nothing here may be visible to anything
   outside the .zar-v2 root. See index.html: the orb, compact
   panel, and full-screen workspace all live inside ONE
   `<div class="zar-v2" data-zar-v2-theme="…">` wrapper (fixed-
   position children of a plain, non-positioned wrapper div
   still position relative to the viewport, so nesting them
   under one root costs nothing structurally).

   Components read a role (--zar-v2-bg-surface, --zar-v2-accent,
   --zar-v2-user-message-bg…), never a primitive directly.
   tokens/themes.css is the ONLY file that remaps a role to a
   different primitive.

       primitives (:root) → semantic roles (.zar-v2, this file,
       dark baseline) → theme override (.zar-v2[data-zar-v2-theme],
       themes.css) → components

   This file supplies the DARK baseline directly on `.zar-v2`
   (dark is v2's default/hero look), and themes.css explicitly
   mirrors it under `.zar-v2[data-zar-v2-theme="dark"]` for
   symmetry with the light override sitting right next to it.
========================================================= */

.zar-v2 {

  /* ---------------------------------------------------------
     SURFACES
  --------------------------------------------------------- */
  --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);

  /* ---------------------------------------------------------
     TEXT
  --------------------------------------------------------- */
  --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;

  /* ---------------------------------------------------------
     BORDERS
  --------------------------------------------------------- */
  --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);

  /* ---------------------------------------------------------
     ACCENT (indigo/periwinkle)
  --------------------------------------------------------- */
  --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);

  /* ---------------------------------------------------------
     LAUNCHER (ORB) SURFACE
     2026-09 finalization: the logo itself (image/zar_ai_mark.svg)
     is used bare everywhere EXCEPT the collapsed launcher — no
     halo/background/border of its own (see components/icon.css).
     The launcher button is the one place a circular halo/
     container legitimately exists; these tokens govern ONLY that
     outer button, never a wrapper around the logo itself.
  --------------------------------------------------------- */
  --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);

  /* ---------------------------------------------------------
     CONVERSATION SURFACES
  --------------------------------------------------------- */
  --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);

  /* ---------------------------------------------------------
     KNOWLEDGE LAYER CARD (auto-enrichment, routing invisible)
  --------------------------------------------------------- */
  --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);

  /* ---------------------------------------------------------
     STRUCTURAL TEXTURE (low-contrast grid INSIDE the ZAR shell
     only — never applied to the host canvas)
  --------------------------------------------------------- */
  --zar-v2-grid-line: rgba(255, 255, 255, 0.028);

  /* ---------------------------------------------------------
     SCROLLBAR
  --------------------------------------------------------- */
  --zar-v2-scrollbar-thumb:       rgba(255, 255, 255, 0.16);
  --zar-v2-scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
  --zar-v2-scrollbar-track:       transparent;
  --zar-v2-compact-history-scrollbar-idle: transparent;
  --zar-v2-compact-history-scrollbar-active: var(--zar-v2-scrollbar-thumb-hover);

  /* ---------------------------------------------------------
     ELEVATION (theme-aware alias over the raw primitives)
  --------------------------------------------------------- */
  --zar-v2-shadow-panel:   var(--zar-v2-shadow-3);
  --zar-v2-shadow-orb:     var(--zar-v2-shadow-2);
  --zar-v2-shadow-popover: var(--zar-v2-shadow-2);

  /* --zar-v2-state-success/-warning/-danger are consumed straight
     from primitives.css — already role-named, unchanged across
     themes, so no semantic indirection is added for them. */
}