/*
 * proto.css — shared base stylesheet
 *
 * Started as a deliberately-rough proto theme; grown into the streamo
 * base. The body now uses the system-ui stack (matching what most
 * platform UIs expect), and the radius is a clean 6px. Color tokens
 * and structural rules are still simple — apps layer their own type
 * ramps and chrome on top.
 */

:root {
  --ink:      #1c1917;
  --ink-dim:  #78716c;
  --paper:    #fefdf8;
  --rule:     #e7e5e0;
  --accent:   #2563eb;
  --warn:     #ca8a04;
  --flash:    #fef08a;
  --radius:   6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  padding: 1.25rem;
  line-height: 1.5;
}

/* data / code always monospace */
code, pre, .mono { font-family: monospace; }

/* simple bordered card */
.box {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

/* status pill */
.pill {
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
}
.pill.ok  { color: #16a34a; }
.pill.err { color: #dc2626; }

/* flash animation — add .flash class, it auto-expires */
@keyframes proto-flash {
  0%   { background-color: var(--flash); }
  100% { background-color: transparent; }
}
.flash { animation: proto-flash 0.7s ease-out; }

/* divider */
hr { border: none; border-top: 1.5px dashed var(--rule); margin: 0.75rem 0; }

/* muted / helper text */
.dim { color: var(--ink-dim); font-size: 0.8rem; }

/* inline code snippet */
.snippet {
  font-family: monospace;
  font-size: 0.85rem;
  background: var(--rule);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}