/* agent2agent — design tokens
 * Reuse these in the in-app console UI.
 * Dark-mode-only system. All colors documented in OKLCH-friendly hex.
 */

:root {
  /* — Canvas — */
  --a2a-bg:            #06070b;   /* near-black base */
  --a2a-bg-elev-1:     #0b0d14;   /* card / panel */
  --a2a-bg-elev-2:     #11141d;   /* modal / popover */
  --a2a-bg-inset:      #04050a;   /* inset wells (code, terminal) */

  /* — Brand — */
  --a2a-purple:        #6d28d9;   /* primary brand purple */
  --a2a-purple-bright: #8b5cf6;   /* hover / highlight */
  --a2a-indigo:        #4f46e5;   /* gradient pair */
  --a2a-violet:        #9d5cff;   /* accent */
  --a2a-gold:          #d4a64a;   /* center-diamond gold */
  --a2a-mint:          #34d3a1;   /* "shipped" / success */
  --a2a-amber:         #f5b544;   /* warn / roadmap */
  --a2a-rose:          #f97583;   /* danger / 403 */

  /* — Ink — */
  --a2a-ink-1:         #f3f4f8;   /* primary text */
  --a2a-ink-2:         #b8bcc9;   /* secondary text */
  --a2a-ink-3:         #7d8294;   /* tertiary, captions */
  --a2a-ink-4:         #4a4f5e;   /* disabled, deep meta */

  /* — Hairlines — */
  --a2a-hair:          rgba(255,255,255,0.06);
  --a2a-hair-strong:   rgba(255,255,255,0.10);
  --a2a-hair-bright:   rgba(141, 92, 255, 0.28);

  /* — Type — */
  --a2a-font-sans:     "Inter", ui-sans-serif, system-ui, sans-serif;
  --a2a-font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --a2a-font-display:  "Inter", ui-sans-serif, system-ui, sans-serif; /* tight, -0.04em */

  /* Type scale (display) */
  --a2a-text-display:  clamp(40px, 6vw, 76px);
  --a2a-text-h1:       clamp(32px, 4vw, 52px);
  --a2a-text-h2:       clamp(24px, 2.6vw, 36px);
  --a2a-text-body:     16px;
  --a2a-text-sm:       13px;
  --a2a-text-xs:       11.5px;

  /* — Spacing (4pt grid) — */
  --a2a-s-1: 4px;
  --a2a-s-2: 8px;
  --a2a-s-3: 12px;
  --a2a-s-4: 16px;
  --a2a-s-5: 24px;
  --a2a-s-6: 32px;
  --a2a-s-7: 48px;
  --a2a-s-8: 64px;
  --a2a-s-9: 96px;
  --a2a-s-10: 128px;

  /* — Radii — */
  --a2a-r-sm: 6px;
  --a2a-r-md: 10px;
  --a2a-r-lg: 14px;
  --a2a-r-xl: 20px;

  /* — Shadows — */
  --a2a-shadow-glass:  0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -30px rgba(0,0,0,0.6);
  --a2a-shadow-pop:    0 24px 48px -16px rgba(0,0,0,0.7), 0 2px 0 rgba(255,255,255,0.04) inset;
  --a2a-glow-violet:   0 0 0 1px rgba(141,92,255,0.35), 0 12px 40px -8px rgba(141,92,255,0.45);

  /* — Gradients — */
  --a2a-grad-cta:      linear-gradient(135deg, #6d28d9 0%, #4f46e5 50%, #9d5cff 100%);
  --a2a-grad-mesh:     radial-gradient(1100px 600px at 80% -10%, rgba(141,92,255,0.18), transparent 60%),
                       radial-gradient(900px 700px at -10% 30%, rgba(79,70,229,0.16), transparent 55%),
                       radial-gradient(700px 500px at 50% 110%, rgba(52,211,161,0.08), transparent 60%);
  --a2a-grid-color:    rgba(255,255,255,0.035);
  --a2a-grid-size:     56px;

  /* — Motion — */
  --a2a-ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --a2a-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --a2a-dur-fast:      120ms;
  --a2a-dur-base:      240ms;
  --a2a-dur-slow:      480ms;
}