/* Operate (UCCS) — editorial dark tokens */
:root {
  /* Surfaces */
  --bg-void: #07090f;
  --bg-app: #0b1018;
  --bg-panel: #10172380;
  --bg-panel-solid: #101723;
  --bg-raised: #161e2d;
  --bg-elev: #1c2538;
  --bg-input: #0d1320;
  --bg-hover: #1a2334;
  --bg-active: #20293c;

  /* Lines */
  --line: #1f273a;
  --line-soft: #182033;
  --line-strong: #2a3552;
  --line-focus: var(--accent);

  /* Ink */
  --ink-1: #e7ecf5;
  --ink-2: #aab3c7;
  --ink-3: #6f7895;
  --ink-4: #4a536b;
  --ink-on-accent: #0b1018;

  /* Accent — overridable via tweaks */
  --accent: #6e8bff;
  --accent-soft: rgba(110, 139, 255, 0.14);
  --accent-line: rgba(110, 139, 255, 0.45);

  /* Semantic */
  --ok: #3ec96e;
  --ok-soft: rgba(62, 201, 110, 0.14);
  --warn: #e8b94c;
  --warn-soft: rgba(232, 185, 76, 0.14);
  --danger: #ef5b5b;
  --danger-soft: rgba(239, 91, 91, 0.14);
  --rec: #ff4d4d;
  --purple: #8e7bff;

  /* Status dot colors */
  --status-online: var(--ok);
  --status-busy: var(--rec);
  --status-afk: var(--warn);
  --status-offline: #545d75;

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Density (overridable) */
  --row-h: 30px;
  --pad-1: 6px;
  --pad-2: 10px;
  --pad-3: 14px;
  --pad-4: 18px;
  --pad-5: 24px;
  --pad-6: 32px;

  /* Radii — editorial: tight */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 10px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 0 0 1px var(--line);
  --shadow-pop: 0 18px 40px -8px rgba(0, 0, 0, 0.55), 0 4px 12px -2px rgba(0, 0, 0, 0.4),
    0 0 0 1px var(--line-strong);
  --shadow-modal: 0 30px 80px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line-strong);
}

[data-density="compact"] {
  --row-h: 26px;
  --pad-1: 4px;
  --pad-2: 8px;
  --pad-3: 12px;
  --pad-4: 14px;
  --pad-5: 18px;
  --pad-6: 24px;
}
[data-density="spacious"] {
  --row-h: 34px;
  --pad-1: 8px;
  --pad-2: 12px;
  --pad-3: 16px;
  --pad-4: 22px;
  --pad-5: 28px;
  --pad-6: 40px;
}

/* Resets scoped to the app root */
.op-app, .op-app * { box-sizing: border-box; }
.op-app {
  font-family: var(--font-sans);
  color: var(--ink-1);
  background: var(--bg-app);
  font-feature-settings: "ss01", "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.op-app .mono { font-family: var(--font-mono); letter-spacing: 0; }

/* Scrollbars */
.op-app ::-webkit-scrollbar { width: 10px; height: 10px; }
.op-app ::-webkit-scrollbar-thumb {
  background: #1c2538;
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.op-app ::-webkit-scrollbar-thumb:hover { background: #243049; background-clip: padding-box; border: 2px solid transparent; }
.op-app ::-webkit-scrollbar-track { background: transparent; }

/* Buttons & inputs reset */
.op-app button { font-family: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.op-app input, .op-app textarea, .op-app select {
  font-family: inherit; color: inherit; background: none; border: 0; padding: 0; outline: 0;
  font-size: inherit;
}
.op-app input::placeholder, .op-app textarea::placeholder { color: var(--ink-4); }
.op-app a { color: var(--accent); text-decoration: none; }

/* Keyframes */
@keyframes op-pulse-rec {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes op-bar {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}
@keyframes op-spin { to { transform: rotate(360deg); } }
@keyframes op-fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Focus ring */
.op-app .focusable:focus-visible,
.op-app input:focus-visible,
.op-app button.focusable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}