/* geeViz Agent — Theme Variables (Monokai Dark)
   Swap this file to change the entire UI theme.
   ================================================ */
:root {
  /* ── Core palette ── */
  --bg:             #272822;
  --surface:        #372e2c;
  --surface-transparent: #372e2cEE;
  --surface-hover:  #443a37;
  --text:           #f8f8f2;
  --muted:          #968b83;
  --accent:         #00bfa5;
  --highlight:      #ff834c;
  --border:         #6f6259;
  --divider:        #40403a;
  --error:          #e74c3c;
  --tool-bg:        #332e28;       /* noticeably warmer/lighter than --bg */
  --radius:         0.3rem;

  /* ── Tinted overlays ── */
  --accent-dim:      rgba(0,191,165,0.15);
  --accent-dim-light: rgba(0,191,165,0.1);
  --highlight-dim:   rgba(255,131,76,0.12);
  --error-dim:       rgba(231,76,60,0.15);
  --hover-overlay:   rgba(255,255,255,0.05);
  --backdrop-overlay: rgba(0,0,0,0.5);
  --backdrop-dark:   rgba(0,0,0,0.6);
  --loading-overlay: rgba(39,40,34,0.85);

  /* ── Syntax / code highlighting (Monokai) ── */
  --code-bg:        #272822;
  --code-border:    #40403a;
  --syntax-green:   #a6e22e;
  --syntax-yellow:  #e6db74;
  --syntax-purple:  #ae81ff;
  --syntax-blue:    #66d9ef;
  --syntax-red:     #f92672;
  --syntax-orange:  #fd971f;

  /* ── Token bar colors ── */
  --token-input:    #66d9ef;
  --token-output:   #e6db74;
  --token-thinking: #ae81ff;
  --token-tool:     #a6e22e;

  /* ── Typography ──
     ``--font-body`` falls through to the tenant's ``--font-stack`` (set
     from ``typography.css_font_stack`` in tenant.yaml) so theme CSS
     never overrides a tenant's chosen font. The literal stack here is
     only the fallback for tenants that don't define one. */
  --font-body:      var(--font-stack, 'Roboto Condensed', 'Segoe UI', Arial, sans-serif);
  --font-mono:      Consolas, 'Fira Code', 'Courier New', monospace;

  /* ── Spacing (reference tokens) ── */
  --header-h:       45px;
  --footer-h:       30px;
  --sidebar-w:      200px;
}
