/* ============================================================
 * base.css
 * Design tokens (CSS custom properties), global resets,
 * typography primitives, selection color.
 * ============================================================ */

:root {
  /* palette */
  --bg: #f5f3ee;
  --bg-2: #ecebe5;
  --ink: #0f0e0c;
  --ink-2: #2b2825;
  --muted: #6b655e;
  --muted-2: #9a948b;
  --rule: rgba(15, 14, 12, 0.12);
  --rule-soft: rgba(15, 14, 12, 0.07);
  --accent: #c2410c;
  --accent-tint: #f0d9c8;

  /* font stacks */
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', serif;

  /* dynamic — set by tweaks.js */
  --hero-scale: 1;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--bg); }

/* shared meta label (mono) */
.label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.label .tick { color: var(--accent); }

.mono { font-family: var(--mono); }

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

/* router visibility */
.view { display: none; }
.view.active { display: block; }

/* blinking cursor utility */
.cursor-blink::after {
  content: "▍";
  color: var(--accent);
  animation: blink 1.1s steps(1) infinite;
  margin-left: 4px;
}
@keyframes blink { 50% { opacity: 0; } }

/* dark mode heuristic — applied by tweaks.js */
body.dark {
  --bg: #0f0e0c;
  --bg-2: #1a1816;
  --ink: #f5f3ee;
  --ink-2: #d6d1c7;
  --muted: #8a847a;
  --muted-2: #5e5a53;
  --rule: rgba(245, 243, 238, 0.14);
  --rule-soft: rgba(245, 243, 238, 0.08);
}

/* density variants — applied by tweaks.js */
body.density-compact .section { padding: 64px 0; }
body.density-compact .hero { padding: 64px 0 80px; }
body.density-airy .section { padding: 140px 0; }
body.density-airy .hero { padding: 128px 0 160px; }

/* section rules toggle */
body.rules-off .section,
body.rules-off .hero,
body.rules-off .now,
body.rules-off .page-hero,
body.rules-off .filters,
body.rules-off .article,
body.rules-off .work-item,
body.rules-off header.site,
body.rules-off footer.site { border-color: transparent !important; }