@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  --ink: #0a0a0b;
  --paper: #f6f6f7;
  --slate: #1a1b1e;
  --border: #2a2b2e;
  --muted: #6b6d72;
  --accent: #2d5a78;
  --accent-bright: #3d7ea6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.font-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.text-balance { text-wrap: balance; }
.max-w-read { max-width: 65ch; }

.bg-paper { background-color: var(--paper); }
.bg-ink { background-color: var(--ink); }
.bg-slate { background-color: var(--slate); }
.text-ink { color: var(--ink); }
.text-muted { color: var(--muted); }
.text-accent { color: var(--accent-bright); }
.border-border { border-color: var(--border); }
.bg-slate\/5 { background-color: rgba(26, 27, 30, 0.05); }
.bg-slate\/10 { background-color: rgba(26, 27, 30, 0.1); }
.hover\:text-accent:hover { color: var(--accent-bright); }
.hover\:bg-slate\/10:hover { background-color: rgba(26, 27, 30, 0.1); }

#security-model-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
#security-model-toggle svg { transition: transform 0.2s ease; }

.layer-tab { border-bottom: 2px solid transparent; margin-bottom: -2px; }
.layer-tab-active { font-weight: 600; color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
.layer-tab:not(.layer-tab-active) { color: var(--muted); }
.layer-tab:not(.layer-tab-active):hover { color: var(--accent-bright); }