/* Selfievo · base.css — the base of the light customer theme. Tokens: tokens.css. */
/* Ported unchanged from app/static/app.css (slice U-A0, plan-api-first-rebuild.md §2.2): the block „base“. */

/* --- base --------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.3px; margin: 0; color: var(--text); }
h1 { font-size: 28px; font-weight: 650; line-height: 1.2; }
h2 { font-size: 18px; font-weight: 650; line-height: 1.3; }
h3 { font-size: 15px; font-weight: 650; line-height: 1.35; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
a:hover { color: var(--accent-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 16px;
  background: var(--text); color: #fff; border-radius: var(--r-s); font-weight: 650; text-decoration: none;
}
.skip:focus { top: 10px; color: #fff; }

.meta { font-size: 12.5px; color: var(--text-muted); }
.dim { color: var(--text-dim); }
.mut { color: var(--text-muted); font-weight: 500; }
.lead { font-size: 16px; color: var(--text-dim); margin: 10px 0 22px; }
.eyebrow {
  font: 700 11px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.ico { width: 18px; height: 18px; flex: none; }
.ico-s { width: 14px; height: 14px; flex: none; vertical-align: -2px; }