/* Brutalist technical foundation */
:root {
  --bg: #f2f1ec;
  --fg: #0a0a0a;
  --fg-2: #2a2a2a;
  --muted: #6b6b66;
  --line: #0a0a0a;
  --line-soft: rgba(10,10,10,0.18);
  --accent: #ff4a1c;
  --accent-2: #1a47ff;
  --warn: #c4001d;
  --ok: #006a2e;
  --paper: #ffffff;
  --grid: rgba(10,10,10,0.06);
}
[data-theme="dark"] {
  --bg: #0c0c0c;
  --fg: #ededeb;
  --fg-2: #c9c9c4;
  --muted: #8a8a82;
  --line: #ededeb;
  --line-soft: rgba(237,237,235,0.22);
  --accent: #ff7a3d;
  --accent-2: #6c8cff;
  --warn: #ff5566;
  --ok: #5cd28b;
  --paper: #141413;
  --grid: rgba(237,237,235,0.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }

.display { font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: -0.025em; line-height: 0.92; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ===== App chrome (theme toggle) ===== */
.app-chrome {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: stretch;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.app-chrome .brand {
  padding: 10px 14px;
  border-right: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
}
.app-chrome .brand .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.app-chrome .spacer { flex: 1; border-right: 1px solid var(--line); }
.app-chrome .tools { display: flex; }
.app-chrome .tool {
  padding: 10px 14px;
  border-right: 1px solid var(--line);
  cursor: pointer;
  color: var(--muted);
}
.app-chrome .tool:last-child { border-right: 0; }
.app-chrome .tool:hover, .app-chrome .tool.on { color: var(--fg); }

main { padding-top: 38px; }