/* Motion GTM Workspace — Color Tokens */

:root {
  /* ── Backgrounds ────────────────────────────── */
  --color-bg-base:         #06111f;
  --color-bg-elevated:     #08172a;
  --color-bg-panel:        rgba(255, 255, 255, 0.045);
  --color-bg-panel-dark:   rgba(2, 6, 23, 0.72);
  --color-bg-overlay:      rgba(2, 6, 23, 0.86);
  --color-bg-panel-strong: rgba(3, 10, 24, 0.72);
  --color-bg-band:         rgba(255, 255, 255, 0.03);

  /* ── Lines & Borders ────────────────────────── */
  --color-line:            rgba(255, 255, 255, 0.10);
  --color-line-strong:     rgba(255, 255, 255, 0.18);
  --color-line-accent:     rgba(103, 232, 249, 0.20);
  --color-line-accent-str: rgba(103, 232, 249, 0.35);

  /* ── Text ───────────────────────────────────── */
  --color-text-primary:    #ffffff;
  --color-text-secondary:  #cbd5e1;
  --color-text-tertiary:   #a8b3c7;
  --color-text-muted:      #64748b;

  /* ── Cyan — primary brand accent ───────────── */
  --color-cyan-50:         #ecfeff;
  --color-cyan-100:        #cffafe;
  --color-cyan-200:        #a5f3fc;
  --color-cyan-300:        #67e8f9;
  --color-cyan-400:        #22d3ee;
  --color-cyan-500:        #06b6d4;

  /* ── Cyan surfaces ──────────────────────────── */
  --color-cyan-surface:    rgba(103, 232, 249, 0.10);
  --color-cyan-surface-str:rgba(103, 232, 249, 0.20);

  /* ── Blue — secondary accent ────────────────── */
  --color-blue-400:        #60a5fa;
  --color-blue-500:        #3b82f6;
  --color-blue-surface:    rgba(59, 130, 246, 0.12);

  /* ── Semantic / Status ──────────────────────── */
  --color-success:         #6ee7b7;
  --color-success-surface: rgba(110, 231, 183, 0.10);
  --color-danger:          #fca5a5;
  --color-danger-surface:  rgba(252, 165, 165, 0.10);
  --color-warning:         #fcd34d;
  --color-warning-surface: rgba(252, 211, 77, 0.10);
}