/* ============================================================
   Agent V2 — Design Tokens
   Extends theme.css with agent-specific tokens.
   All values reference existing MD3 tokens where possible.
   ============================================================ */

:root {
    /* ── Typography Tokens ──────────────────────────────────── */
    --font-heading:           'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:              'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Agent Surfaces ─────────────────────────────────────── */
    --agent-surface:          rgba(15, 16, 19, 0.65);
    --agent-surface-elevated: rgba(22, 23, 27, 0.78);
    --agent-surface-hover:    rgba(32, 33, 38, 0.88);
    --agent-border:           rgba(255, 255, 255, 0.08);
    --agent-border-subtle:    rgba(255, 255, 255, 0.04);
    --agent-glow:             rgba(0, 240, 255, 0.15);

    /* ── Status Colors ──────────────────────────────────────── */
    --status-running:    var(--md-sys-color-primary);       /* #00f0ff cyan */
    --status-success:    var(--md-sys-color-success);       /* #50fa7b green */
    --status-error:      var(--md-sys-color-error);         /* #ff3b30 red */
    --status-warning:    var(--md-sys-color-tertiary);      /* #ff6b00 orange */
    --status-delegating: #bd93f9;                           /* Dracula purple */
    --status-waiting:    var(--md-sys-color-on-surface-variant); /* #888 grey */
    --status-idle:       var(--md-sys-color-outline);       /* #25262a dim */

    /* ── Agent Identity Colors ──────────────────────────────── */
    --agent-color-coordinator: var(--md-sys-color-primary);
    --agent-color-inquisitor:  #f1fa8c;   /* Dracula yellow */
    --agent-color-architect:   #bd93f9;   /* Dracula purple */
    --agent-color-lorekeeper:  #8be9fd;   /* Dracula cyan */
    --agent-color-coder:       var(--md-sys-color-tertiary);
    --agent-color-tester:      var(--md-sys-color-success);
    --agent-color-documenter:  #ff79c6;   /* Dracula pink */
    --agent-color-debugger:    var(--md-sys-color-error);
    --agent-color-auditor:     #ffb86c;   /* Dracula orange */
    --agent-color-schema:      #6272a4;   /* Dracula comment */

    /* ── Card Tokens ────────────────────────────────────────── */
    --card-radius:        var(--md-sys-shape-corner-small);
    --card-radius-lg:     var(--md-sys-shape-corner-medium);
    --card-padding:       var(--md-sys-spacing-4);          /* 12px */
    --card-padding-sm:    var(--md-sys-spacing-3);          /* 8px */
    --card-border-width:  1px;
    --card-status-width:  3px;
    --card-backdrop-blur: blur(20px) saturate(200%);
    --card-shadow:        0 8px 32px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.05);

    /* ── Animation Tokens ───────────────────────────────────── */
    --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-spring:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-instant:  80ms;
    --duration-fast:     150ms;
    --duration-normal:   250ms;
    --duration-slow:     400ms;
    --duration-expand:   350ms;

    /* ── Slash Palette Tokens ───────────────────────────────── */
    --palette-bg:          var(--agent-surface-elevated);
    --palette-border:      var(--agent-border);
    --palette-item-hover:  var(--md-sys-color-surface-hover);
    --palette-item-active: var(--md-sys-color-surface-active);
    --palette-kbd-bg:      rgba(255, 255, 255, 0.06);
    --palette-kbd-border:  rgba(255, 255, 255, 0.1);
    --palette-category:    var(--md-sys-color-on-surface-variant);
    --palette-max-height:  320px;

    /* ── Timeline Tokens ────────────────────────────────────── */
    --timeline-line-color: var(--md-sys-color-outline);
    --timeline-line-width: 2px;
    --timeline-dot-size:   10px;
    --timeline-dot-active: var(--md-sys-color-primary);
    --timeline-dot-undone: var(--md-sys-color-on-surface-variant);

    /* ── Chat Input Tokens ──────────────────────────────────── */
    --input-bg:            var(--md-sys-color-surface);
    --input-border:        var(--md-sys-color-outline);
    --input-border-focus:  var(--md-sys-color-primary);
    --input-placeholder:   var(--md-sys-color-on-surface-variant);
    --input-max-rows:      6;

    /* ── Message Tokens ─────────────────────────────────────── */
    --msg-user-bg:     rgba(0, 240, 255, 0.06);
    --msg-user-border: rgba(0, 240, 255, 0.12);
    --msg-agent-bg:    var(--agent-surface);
    --msg-agent-border: var(--agent-border);
    --msg-system-bg:   rgba(255, 107, 0, 0.06);
    --msg-system-border: rgba(255, 107, 0, 0.12);

    /* ── Metrics Tokens ─────────────────────────────────────── */
    --metrics-badge-bg:    rgba(0, 240, 255, 0.08);
    --metrics-badge-text:  var(--md-sys-color-primary);
}

/* ── Light Theme Overrides ──────────────────────────────────── */
[data-theme="vs-light"] {
    --agent-surface:          rgba(255, 255, 255, 0.9);
    --agent-surface-elevated: rgba(245, 245, 247, 0.95);
    --agent-surface-hover:    rgba(224, 228, 236, 0.95);
    --agent-border:           rgba(0, 0, 0, 0.08);
    --agent-border-subtle:    rgba(0, 0, 0, 0.04);
    --agent-glow:             rgba(25, 127, 230, 0.08);

    --msg-user-bg:     rgba(25, 127, 230, 0.06);
    --msg-user-border: rgba(25, 127, 230, 0.12);
    --msg-agent-bg:    var(--agent-surface);
    --msg-agent-border: var(--agent-border);
    --msg-system-bg:   rgba(255, 107, 0, 0.06);
    --msg-system-border: rgba(255, 107, 0, 0.12);

    --palette-kbd-bg:      rgba(0, 0, 0, 0.06);
    --palette-kbd-border:  rgba(0, 0, 0, 0.1);
    --metrics-badge-bg:    rgba(25, 127, 230, 0.08);
    --metrics-badge-text:  #197fe6;

    --status-delegating: #7c3aed;
    --scrollbar-thumb-bg: rgba(0, 0, 0, 0.12);
}