/* SIGNAL design tokens — light neutral, one gray ramp, no brand color.
   Status dots are the only color. Zero gradients anywhere. */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f7f8;
  --surface-3: #f0f0f1;
  --border: #e8e8ea;
  --border-2: #d6d6d9;
  --text: #0a0a0b;
  --text-2: #5c5c66;
  --text-3: #9e9ea8;
  --accent: #0a0a0b;
  --accent-fg: #ffffff;

  --dot-live: #16a34a;
  --dot-paused: #d97706;
  --dot-offline: var(--text-3);
  --destructive: #dc2626;

  --radius-control: 8px;
  --radius-card: 10px;
  --radius-panel: 12px;
  --radius-modal: 14px;

  --shadow-pop: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 20px 56px rgba(0, 0, 0, 0.14);

  --focus-ring: 0 0 0 1px #0a0a0b, 0 0 0 4px rgba(10, 10, 11, 0.07);

  --font:
    "Inter", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

body {
  overflow: hidden; /* the shell owns the viewport */
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a {
  color: var(--text-2);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-control);
}

::selection {
  background: rgba(10, 10, 11, 0.1);
}

/* Scrollbars — light, quiet */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 999px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}