/* web/styles.css */
:root {
  --bg: #fafaf6;
  --ink: #1a1a18;
  --muted: #6b6b66;
  --line: #0000002e;
  --line-strong: #0000004d;
  --accent: #1d9e75;
  --accent-fill: #e1f5ee;
  --accent-ink: #0f6e56;
  --danger: #9e3030;
  --danger-fill: #fde1e1;
  --surface: #fff;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  display: flex;
  justify-content: center;
  align-items:  center;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  line-height: 1.6;
}

main {
  width: 100%;
}

p.lede {
  color: var(--muted);
  margin: 0 0 2rem;
  font-size: 1.05rem;
}

.frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

svg {
  display: block;
  width: 100%;
  height: auto;
}

.box {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.box-accent, .box-positive {
  fill: var(--accent-fill);
  stroke: var(--accent);
  stroke-width: 1;
}

.box-negative {
  fill: var(--danger-fill);
  stroke: var(--danger);
  stroke-width: 1;
}

.label {
  fill: var(--ink);
  font-size: 32px;
  font-weight: 200;
}

.label-accent {
  fill: var(--accent-ink);
  font-size: 14px;
  font-weight: 500;
}

.base {
  stroke: var(--line);
  stroke-width: 1;
  fill: none;
}

.flow {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 6 10;
  stroke-linecap: round;
}

.value {
  font-size: 48px;
}