/* OpenClaw Design System v1.1 — Resonant360 Professional Dark */
:root {
  --oc-primary: #1a73d1;
  --oc-accent: #42a6f5;
  --oc-header: #0d47a1;
  --oc-base: #0f2044;
  --oc-surface: #10264f;
  --oc-surface-2: #132b5a;
  --oc-text: #e2e3e4;
  --oc-text-muted: #58595b;
  --oc-warn: #ffa443;
  --oc-critical: #ef4444;

  --oc-division-salesforce: #1a73d1;
  --oc-division-marketing: #ffa443;
  --oc-division-dev: #7860bb;

  --oc-gap-lg: 2rem;
  --oc-gap: 1rem;
  --oc-pad: 1.5rem;
  --oc-radius-card: 8px;
  --oc-radius-control: 4px;
  --oc-radius-pill: 12px;
  --oc-shadow-card: 0 4px 6px -1px rgba(0,0,0,.3), 0 2px 4px -1px rgba(0,0,0,.2);
  --oc-shadow-hover: 0 10px 15px -3px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
html, body {
  background: var(--oc-base) !important;
  color: var(--oc-text) !important;
  font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body { line-height: 1.5; }

h1 {
  font-size: clamp(24px, 3.1vw, 32px) !important;
  font-weight: 700 !important;
  color: var(--oc-text) !important;
  margin-bottom: 32px !important;
}
h2 {
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--oc-accent) !important;
}
h3, .k, .task-section h3 {
  font-size: 12px !important;
  color: var(--oc-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}
p, .subtitle, .sub, .row span, .meta, .task-section li, .node-meta {
  color: var(--oc-text) !important;
}
.caption, .last-updated, .k, .label, .card .meta .label, .hier-node .info span {
  color: var(--oc-text-muted) !important;
}

.layout-page, .panel, .status-bar, .card, .node-box, .node-card, .hierarchy {
  background: var(--oc-surface) !important;
  border-radius: var(--oc-radius-card) !important;
  border: 1px solid rgba(26,115,209,.1) !important;
  box-shadow: var(--oc-shadow-card) !important;
}

.card, .node-box, .node-card, .panel, .hierarchy { padding: var(--oc-pad) !important; }
.grid { gap: var(--oc-gap-lg) !important; }
.status-bar { padding: 12px 18px !important; }
.row { border-bottom: 1px solid rgba(255,255,255,.05) !important; }

/* Division accents */
.card, .node-box, .node-card, .panel, .hierarchy {
  border-left: 4px solid var(--oc-division-salesforce) !important;
}

/* Controls */
a { color: var(--oc-accent) !important; }
button, .refresh-btn {
  background: var(--oc-primary) !important;
  color: var(--oc-text) !important;
  border: 1px solid var(--oc-primary) !important;
  border-radius: var(--oc-radius-control) !important;
  transition: all .2s ease;
}
button:hover, .refresh-btn:hover {
  background: var(--oc-header) !important;
  box-shadow: var(--oc-shadow-hover);
}
button:active, .refresh-btn:active {
  transform: scale(.98);
  box-shadow: 0 0 8px var(--oc-accent);
}

.badge {
  border-radius: var(--oc-radius-pill) !important;
  border: 1px solid rgba(255,255,255,.08);
}
.badge.online, .badge.active { color: #9fe870 !important; background: rgba(124,252,0,.12) !important; }
.badge.idle { color: var(--oc-text-muted) !important; background: rgba(88,89,91,.2) !important; }
.badge.queued { color: var(--oc-warn) !important; background: rgba(255,164,67,.12) !important; }
.badge.error { color: var(--oc-critical) !important; background: rgba(239,68,68,.14) !important; }

pre, code {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  background: #0b1a3a !important;
  color: var(--oc-text) !important;
  border-radius: var(--oc-radius-card);
}

/* Loading pulse for card accent borders */
.loading-card {
  animation: oc-pulse 1.2s ease-in-out infinite;
}
@keyframes oc-pulse {
  0% { border-left-color: rgba(26,115,209,.45); }
  50% { border-left-color: rgba(66,166,245,1); }
  100% { border-left-color: rgba(26,115,209,.45); }
}