/* tokens.css — shared design tokens across the controller, ribbon preview,
   and (later) every embedded app that mounts a ribbon widget. */

:root {
  --bg: #12181f;
  --panel: #1e2731;
  --panel-raised: #242f3a;
  --hairline: #2e3944;
  --text: #e8edf2;
  --text-muted: #7a8a99;

  --state-normal: #4caf7d;
  --state-alert: #f4b41a;
  --state-critical: #d64545;
  --state-deescalating: #4a90d9;

  --mono: "JetBrains Mono", "Courier New", monospace;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}

/* ---- Shared ribbon widget ---- */

.gev-ribbon {
  --ribbon-accent: var(--state-normal);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ribbon-accent);
  padding: 16px 18px;
  transition: border-left-color 0.4s ease;
}

.gev-ribbon-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.gev-ribbon-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--state-normal);
  flex: none;
  transition: background 0.4s ease;
}

.gev-ribbon-state {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text);
}

.gev-ribbon-caption {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

@keyframes ribbon-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ribbon-accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--ribbon-accent) 0%, transparent); }
}

.gev-ribbon-pulse {
  animation: ribbon-pulse 0.9s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .gev-ribbon-pulse { animation: none; }
}