/**
 * DESIGN SYSTEM: MakeThemShine.io
 * Aesthetic: Industrial/Utilitarian + Warmth
 * "Reactor control room that someone actually lives in"
 *
 * Source of truth: DESIGN.md
 * Fonts: Satoshi (display), Geist (body), Geist Mono (data)
 * Accent: Amber (#D4922A)
 */

:root {
  /* === SURFACES (warm-shifted near-blacks) === */
  --bg-base:        #09090B;
  --bg-primary:     #131316;
  --bg-secondary:   #1C1C21;
  --bg-tertiary:    #24242B;
  --bg-elevated:    #2A2A32;

  /* Aliases for semantic clarity */
  --bg-surface:     var(--bg-primary);
  --bg-hover:       var(--bg-tertiary);

  /* === BORDERS === */
  --border-subtle:  #2A2A32;
  --border-default: #3A3A44;
  --border-strong:  #4A4A54;

  /* === TEXT (warm whites) === */
  --text-primary:   #E8E4DE;
  --text-secondary: #9E9A93;
  --text-muted:     #6E6A63;
  --text-inverse:   #09090B;

  /* === ACCENT: AMBER === */
  --accent-primary: #D4922A;
  --accent-hover:   #E5A43C;
  --accent-subtle:  rgba(212, 146, 42, 0.12);
  --accent-border:  rgba(212, 146, 42, 0.30);
  --accent-glow:    rgba(212, 146, 42, 0.15);

  /* === SECONDARY: BLUE (sparingly) === */
  --color-info:     #3B82F6;
  --info-subtle:    rgba(59, 130, 246, 0.12);

  /* === SEMANTIC === */
  --color-success:  #22C55E;
  --color-warning:  #D4922A;
  --color-danger:   #EF4444;
  --success-subtle: rgba(34, 197, 94, 0.12);
  --warning-subtle: rgba(212, 146, 42, 0.12);
  --error-subtle:   rgba(239, 68, 68, 0.12);

  /* === PRIORITY (maps to semantic) === */
  --priority-low:    var(--color-success);
  --priority-medium: var(--color-warning);
  --priority-high:   var(--color-danger);

  /* === SHADOWS (chromatic) === */
  --shadow-sm:  0 1px 3px rgba(9, 9, 11, 0.5);
  --shadow-md:  0 4px 12px rgba(9, 9, 11, 0.6);
  --shadow-lg:  0 8px 32px rgba(9, 9, 11, 0.7);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* === LAYOUT === */
  --sidebar-width:  220px;
  --topbar-height:  48px;

  /* === RADIUS (hierarchical) === */
  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-lg:      10px;
  --radius-xl:      12px;

  /* === TYPOGRAPHY === */
  --font-display: 'Satoshi', -apple-system, system-ui, sans-serif;
  --font-body:    'Geist', -apple-system, system-ui, sans-serif;
  --font-ui:      'Geist', -apple-system, system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* Legacy alias */
  --font-data:    var(--font-mono);

  /* === TYPE SCALE === */
  --font-size-2xs:  11px;
  --font-size-xs:   12px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-md:   16px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-2xl:  32px;
  --font-size-3xl:  48px;

  /* === MOTION === */
  --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  /* === SPACING (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;
  --sp-16: 64px;
}

/* === LUMINOSITY AS STATUS === */
/* Active agents: amber glow */
.agent-active,
[data-status="active"] {
  border-color: var(--accent-border);
  box-shadow: 0 0 20px var(--accent-glow), inset 0 0 0 1px var(--accent-border);
}

/* Idle agents: dim */
.agent-idle,
[data-status="idle"] {
  opacity: 0.6;
}

/* Error agents: pulse red */
.agent-error,
[data-status="error"] {
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
  animation: error-pulse 2s ease-in-out infinite;
}

@keyframes error-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.1); }
  50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.2); }
}