/* base.css — resets + typography + utilities. */

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--base-font-size);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); font-weight: 600; line-height: 1.25; }
h1 { font-family: var(--font-display); font-weight: 500; font-size: 28px; letter-spacing: -0.01em; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

p { margin: 0 0 var(--space-3); color: var(--ink); }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-3) 0; }

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

input, button, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: var(--space-2) var(--space-3);
  width: 100%;
}
input:focus, button:focus-visible, select:focus, textarea:focus, a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

button { cursor: pointer; }

/* Utility helpers */
.muted   { color: var(--ink-muted); }
.subtle  { color: var(--ink-subtle); }
.flex    { display: flex; }
.flex-1  { flex: 1; }
.gap-1   { gap: var(--space-1); }
.gap-2   { gap: var(--space-2); }
.gap-3   { gap: var(--space-3); }
.gap-4   { gap: var(--space-4); }
.center  { display: flex; align-items: center; justify-content: center; }
.hidden  { display: none !important; }

[hidden] { display: none !important; }

::selection { background: var(--gold-soft); color: var(--ink); }