/* zeit's theme.
 *
 * A control panel for one person, so it reads like a terminal rather than a
 * product: mono for anything that is data, a single accent colour used only for
 * the thing that is running, and no decoration that does not carry information.
 */
@plugin "daisyui/theme" {
  name: "zeit";
  default: true;
  prefersdark: true;
  color-scheme: dark;

  --color-base-100: oklch(19% 0.008 260);
  --color-base-200: oklch(23% 0.009 260);
  --color-base-300: oklch(29% 0.010 260);
  --color-base-content: oklch(92% 0.006 260);

  --color-primary: oklch(78% 0.16 155);
  --color-primary-content: oklch(18% 0.03 155);

  --color-secondary: oklch(70% 0.10 260);
  --color-secondary-content: oklch(18% 0.02 260);

  --color-accent: oklch(80% 0.14 85);
  --color-accent-content: oklch(20% 0.04 85);

  --color-neutral: oklch(29% 0.010 260);
  --color-neutral-content: oklch(92% 0.006 260);

  --color-info: oklch(74% 0.11 235);
  --color-success: oklch(78% 0.16 155);
  --color-warning: oklch(80% 0.14 85);
  --color-error: oklch(68% 0.19 25);

  --radius-selector: 0.25rem;
  --radius-field: 0.25rem;
  --radius-box: 0.375rem;
  --border: 1px;
}

body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

.font-mono,
code,
pre,
table {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* Status dots. The colour is the whole message, so it has to survive being
 * small: a dot that is only a hue difference is unreadable at 8px, hence the
 * ring. */
.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
}

/* The journal. Long lines wrap rather than scroll: reading a stack trace by
 * dragging a horizontal scrollbar is miserable. */
.journal {
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 32rem;
  overflow-y: auto;
}

/* Tables of apps are scanned, not read. Tighten them up and let the wide ones
 * scroll inside their own container rather than the page. */
.table-scroll {
  overflow-x: auto;
}

.table :where(th) {
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.5;
}