/* base.css — reset + typography + layout primitives (§7.1).
   System font stack only: zero webfont requests, instant paint. */

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

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

body {
  font-family: var(--font);
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--ink); }
h1 { font-size: var(--fs-20); }
h2 { font-size: var(--fs-16); }
h3 { font-size: var(--fs-14); }

p { margin: 0; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .mono { font-family: var(--mono); font-size: 0.92em; }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; color: var(--ink); }

::selection { background: var(--accent-soft); }

/* captions / section labels: 11–12px uppercase letter-spaced (§7.1) */
.caption {
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
}

.muted { color: var(--ink-3); }
.text-2 { color: var(--ink-2); }

/* app frame: sidebar + column(topbar, view) */
.app { display: flex; min-height: 100vh; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.view { flex: 1; padding: var(--sp-6) var(--sp-8); }

/* when the login page is active the chrome is hidden and the view centers */
.app.no-chrome .main-col { width: 100%; }
.app.no-chrome .view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}

[hidden] { display: none !important; }