/* ============================================================================
   AGENT SPRITES — Design Tokens
   Drop into <head> of index.html (inside a <style> block) or link as a file.
   Dark-mode-native. Plain CSS custom properties — no build step required.
   Each token notes the hardcoded value(s) it replaces in index.html / embed.html.
   ========================================================================== */
:root {
  /* ---- Brand accent triad ------------------------------------------------ */
  --as-orange:        #ff6b1a;   /* lead accent · CTAs · 'working' state · replaces #ff6b1a */
  --as-orange-bright: #ff8a3d;   /* hover / glow tint for orange */
  --as-green:         #44aa99;   /* secondary · 'idle' dot · replaces #4a9 and #44aa99 */
  --as-green-bright:  #54d98c;   /* success / lifted green · replaces ad-hoc greens */
  --as-purple:        #c084fc;   /* tertiary · Build Pack / special actions */
  --as-purple-deep:   #a855f7;   /* pressed / deep purple accent */

  /* ---- Semantic agent-state colors -------------------------------------- */
  --as-state-idle:    #44aa99;   /* replaces idle-dot #4a9 */
  --as-state-working: #ff6b1a;   /* replaces working #ff6b1a */
  --as-state-success: #54d98c;   /* replaces success #54d98c */
  --as-state-error:   #ff5c5c;   /* replaces error #ff5c5c */

  /* ---- Dark neutrals / surfaces ----------------------------------------- */
  --as-bg:            #0b0f0e;   /* base, near-black green-tinted · replaces #0b0f0e */
  --as-surface-1:     #131b18;   /* raised panel top · replaces #131b18 */
  --as-surface-2:     #0e1512;   /* raised panel bottom · replaces #0e1512 */
  --as-hub:           #e8edea;   /* logo center / neutral light · replaces #e0e0e0 */

  /* ---- Text ------------------------------------------------------------- */
  --as-text-heading:  #ffffff;   /* titles · 19.3:1 on bg */
  --as-text-body:     #c6d2cc;   /* paragraphs · 12.4:1 · replaces #cdd / #cde */
  --as-text-muted:    #8ba39a;   /* secondary copy · 7.2:1 · replaces #8aa / #9ab */
  --as-text-dim:      #5b6b64;   /* hints · 3.4:1 — LARGE/UI text only, not body · replaces #566 / #678 */

  /* ---- Borders ---------------------------------------------------------- */
  --as-border:        #243029;   /* default divider/outline · replaces #243029 */
  --as-border-cool:   #2a3b4a;   /* cool-tinted border · replaces #2a3b4a */
  --as-border-soft:   #1c2620;   /* subtle inner border · replaces #1c2620 */

  /* ---- color-mix() tinting recipe --------------------------------------- *
     Accent-tinted fills/borders over the dark base. Swap --tint for any accent.
     Usage: background: var(--as-tint-12); border-color: var(--as-tint-40);    */
  --as-tint:          var(--as-orange);
  --as-tint-08:       color-mix(in srgb, var(--as-tint) 8%,  transparent);
  --as-tint-12:       color-mix(in srgb, var(--as-tint) 12%, transparent);
  --as-tint-20:       color-mix(in srgb, var(--as-tint) 20%, transparent);
  --as-tint-40:       color-mix(in srgb, var(--as-tint) 40%, transparent);
  --as-tint-surface:  color-mix(in srgb, var(--as-tint) 10%, var(--as-bg)); /* solid tinted panel */

  /* ---- Typography ------------------------------------------------------- */
  --as-font-mono:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --as-font-display:  'Silkscreen', 'JetBrains Mono', ui-monospace, monospace; /* pixel display — big moments only */
  --as-fw-regular:    400;
  --as-fw-medium:     500;
  --as-fw-bold:       700;
  --as-fw-black:      800;

  /* type scale (1.250 major-third, mono-friendly) */
  --as-fs-display:    3.052rem;  /* 48.8px — hero, Silkscreen */
  --as-fs-h1:         2.441rem;  /* 39px  */
  --as-fs-h2:         1.953rem;  /* 31px  */
  --as-fs-h3:         1.563rem;  /* 25px  */
  --as-fs-body:       1rem;      /* 16px  */
  --as-fs-caption:    0.8rem;    /* 12.8px */
  --as-fs-code:       0.875rem;  /* 14px  */
  --as-lh-tight:      1.1;
  --as-lh-body:       1.6;
  --as-tracking-cap:  0.08em;    /* UPPERCASE heading letter-spacing */

  /* ---- Spacing scale (4px base) ----------------------------------------- */
  --as-space-1: 4px;  --as-space-2: 8px;  --as-space-3: 12px; --as-space-4: 16px;
  --as-space-5: 24px; --as-space-6: 32px; --as-space-7: 48px; --as-space-8: 64px;

  /* ---- Radii ------------------------------------------------------------ */
  --as-radius-sm: 4px;   /* chips, dots */
  --as-radius-md: 8px;   /* buttons, inputs */
  --as-radius-lg: 12px;  /* cards */
  --as-radius-xl: 16px;  /* modals */
  --as-radius-pill: 999px;

  /* ---- Shadows & neon glows --------------------------------------------- */
  --as-shadow-card:   0 2px 8px rgba(0,0,0,.45);
  --as-shadow-lift:   0 8px 28px rgba(0,0,0,.55);
  --as-glow-orange:   0 0 12px color-mix(in srgb, var(--as-orange) 55%, transparent);
  --as-glow-green:    0 0 12px color-mix(in srgb, var(--as-green) 55%, transparent);
  --as-glow-purple:   0 0 12px color-mix(in srgb, var(--as-purple) 55%, transparent);
  /* text neon glow for headings */
  --as-text-glow:     0 0 8px color-mix(in srgb, var(--as-orange) 60%, transparent);

  /* ---- Motion ----------------------------------------------------------- */
  --as-ease:          cubic-bezier(.2,.7,.2,1);
  --as-dur-fast:      120ms;
  --as-dur:           220ms;
  --as-dur-slow:      420ms;
}

/* Neon heading treatment — apply to display/H1 over the dark base */
.as-glow { color: var(--as-text-heading); text-shadow: var(--as-text-glow); }

/* Reduced-motion guard for the bob/pulse/glow language */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
