/* ════════════════════════════════════════════
   COREDGEN DESIGN TOKENS
   All CSS custom properties — single source of truth
   ════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --cyan:          #6E9FA5;
  --cyan-dim:      rgba(110, 159, 165, 0.15);
  --cyan-border:   rgba(110, 159, 165, 0.35);
  --cyan-glow:     rgba(110, 159, 165, 0.2);
  --green:         #6DA57E;
  --green-dim:     rgba(109, 165, 126, 0.15);
  --green-border:  rgba(109, 165, 126, 0.35);
  --amber:         #AD9460;
  --amber-dim:     rgba(173, 148, 96, 0.15);
  --amber-border:  rgba(173, 148, 96, 0.25);
  --purple:        #8D7EA8;
  --purple-dim:    rgba(141, 126, 168, 0.15);
  --red:           #A8716C;
  --red-dim:       rgba(168, 113, 108, 0.15);
  --red-border:    rgba(168, 113, 108, 0.35);
  --white:         #FFFFFF;

  /* ── Agent Colors (muted) ── */
  --agent-browsing:     #6E9FA5;
  --agent-coding:       #6DA57E;
  --agent-vision:       #8D7EA8;
  --agent-orchestrator: #AD9460;
  --agent-error:        #A8716C;

  /* ── Surfaces ── */
  --bg:            #0D0D0D;
  --panel:         #141414;
  --surface:       #1A1A1A;
  --surface-alt:   #1E1E1E;
  --border:        #2D2D2D;
  --border-light:  #333;

  /* ── Text ── */
  --text:          #E0E0E0;
  --text-primary:  #E0E0E0;
  --text-secondary:#999;
  --text-dim:      #999;
  --text-dimmer:   #666;
  --text-dimmest:  #555;

  /* ── Typography ── */
  --mono:          'JetBrains Mono', monospace;
  --font-ui:       'Inter', system-ui, sans-serif;

  /* ── Spacing Scale (4px base) ── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;

  /* ── Border Radius ── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* ── Easing ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
}