/**
 * ONA Visual Lab — tokens.css
 * Three-layer design token system: Primitive → Semantic → Component.
 * Semantic tokens are overridable per-viz via the VizSpec `theme` field,
 * which the engine injects as inline CSS custom properties on the container.
 *
 * @version 0.2
 */

/* ── Layer 1: Primitive tokens (raw values, no semantics) ───────────────────── */
:root {
  /* Color primitives */
  --p-blue-400:    #6482ff;
  --p-blue-500:    #4f6ef7;
  --p-blue-600:    #3d5ce0;
  --p-gold-400:    #fbbf24;
  --p-red-400:     #f87171;
  --p-green-400:   #34d399;
  --p-cyan-400:    #64b4ff;
  --p-white:       #ffffff;

  /* Background primitives */
  --p-bg-950:      #0f1117;
  --p-bg-900:      #181c27;
  --p-bg-800:      #1e2234;
  --p-bg-700:      #252a3a;
  --p-bg-600:      #2a2e3e;

  /* Border primitives */
  --p-border-600:  #2d3248;
  --p-border-400:  #4f6ef7;

  /* Text primitives */
  --p-text-100:    #e2e6f3;
  --p-text-400:    #8892aa;

  /* Spacing primitives */
  --p-space-1:  4px;
  --p-space-2:  6px;
  --p-space-3:  8px;
  --p-space-4:  12px;
  --p-space-5:  16px;
  --p-space-6:  20px;
  --p-space-7:  24px;
  --p-space-8:  32px;

  /* Radius primitives */
  --p-radius-sm:   4px;
  --p-radius-md:   6px;
  --p-radius-full: 999px;

  /* Typography primitives */
  --p-text-xs: 0.7rem;
  --p-text-sm: 0.8rem;
  --p-text-md: 1rem;

  /* Layout primitives */
  --p-sidebar-w: 280px;
  --p-topbar-h:  44px;
}

/* ── Layer 2: Semantic tokens (reference primitives, describe purpose) ───────── */
:root {
  /* Surface */
  --color-bg:           var(--p-bg-950);
  --color-bg-panel:     var(--p-bg-900);
  --color-bg-elevated:  var(--p-bg-800);
  --color-bg-input:     var(--p-bg-700);

  /* Border */
  --color-border:       var(--p-border-600);
  --color-border-focus: var(--p-border-400);

  /* Text */
  --color-text:         var(--p-text-100);
  --color-text-muted:   var(--p-text-400);

  /* Brand */
  --color-accent:       var(--p-blue-500);
  --color-accent-hover: var(--p-blue-400);
  --color-success:      var(--p-green-400);
  --color-warning:      var(--p-gold-400);
  --color-danger:       var(--p-red-400);

  /* Ghost colors — dimmed/suppressed nodes */
  --color-ghost-deep:   var(--p-bg-950);
  --color-ghost-mid:    var(--p-bg-800);
  --color-ghost-light:  var(--p-bg-600);

  /* ── Lens palette (overridable via VizSpec theme) ────────────────────────── */
  --lens-bridge-color:     var(--p-gold-400);
  --lens-isolation-color:  var(--p-red-400);
  --lens-periphery-lo:     var(--p-blue-500);
  --lens-periphery-hi:     var(--p-green-400);
  --lens-ego-color:        var(--p-white);
  --lens-weak-ties-color:  var(--p-gold-400);
  --lens-contrast-color:   var(--p-white);
  --lens-density-color:    var(--p-cyan-400);

  /* Spacing aliases */
  --space-1: var(--p-space-1);
  --space-2: var(--p-space-2);
  --space-3: var(--p-space-3);
  --space-4: var(--p-space-4);
  --space-5: var(--p-space-5);

  /* Radius aliases */
  --radius-sm:   var(--p-radius-sm);
  --radius-md:   var(--p-radius-md);
  --radius-full: var(--p-radius-full);

  /* Typography aliases */
  --text-xs: var(--p-text-xs);
  --text-sm: var(--p-text-sm);
  --text-md: var(--p-text-md);

  /* Layout */
  --ona-sidebar-w:          var(--p-sidebar-w);
  --ona-sidebar-w-collapsed: 36px;
  --ona-topbar-h:            var(--p-topbar-h);
  --ona-cockpit-sidebar-w:   180px;

  /* Motion durations */
  --motion-panel:   200ms;
  --motion-overlay: 300ms;
  --motion-toast:   150ms;

  /* Component — Tooltip */
  --tooltip-max-w:  210px;
  --tooltip-bg:     var(--color-bg-elevated);
  --tooltip-border: var(--color-border);
  --tooltip-shadow: 0 4px 16px rgba(0,0,0,0.45);
  --tooltip-radius: var(--radius-md);

  /* Component — Toast */
  --toast-bg:     var(--color-bg-elevated);
  --toast-border: var(--color-border);
}