/* ============================================================
   lulab — base styles
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  transition: background var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out);
}

body { min-height: 100vh; overflow-x: hidden; }

/* Mono is the navigational/structural type. Sans is the prose type. */
.mono {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  font-feature-settings: "calt" off;
}
.mono-up {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

/* Headings — mono for structural, sans-serif heavy for big titles */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; color: var(--ink); }
h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: -0.025em;
  font-weight: 500;
}
h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: -0.02em;
  font-weight: 500;
}
h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--ink-2);
}

p { margin: 0; max-width: 60ch; text-wrap: pretty; }
.body-lg { font-size: var(--fs-lg); line-height: var(--lh-lg); }

/* Links — underline that animates in */
a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color var(--dur-fast) var(--ease-out),
              background-size var(--dur-med) var(--ease-out);
}
a:hover { color: var(--accent); background-size: 100% 2px; }

/* Code */
code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code:not(pre code) {
  background: var(--paper-2);
  padding: 0.08em 0.32em;
  border-radius: var(--r-xs);
  color: var(--ink);
}

/* Containers */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-6);
}
.column {
  max-width: var(--column);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

/* Hairline rule — subtle horizontal divider, used a lot */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.rule-strong { border-top-color: var(--rule-2); }

/* Buttons — mono, restrained */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule-2);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  background-image: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

/* Tag / capsule */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, #1e3a5f 8%, transparent);
  color: #1e3a5f;
  border: 1px solid color-mix(in oklab, #1e3a5f 30%, transparent);
  white-space: nowrap;
}
[data-theme="dark"] .tag {
  background: color-mix(in oklab, #7a9bc4 14%, transparent);
  color: #b9cde6;
  border-color: color-mix(in oklab, #7a9bc4 35%, transparent);
}
.tag-accent {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

/* Accent dot */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  flex-shrink: 0;
}

/* Selection */
::selection { background: var(--accent); color: var(--accent-on); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Utility */
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); }
.flex { display: flex; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); } .gap-8 { gap: var(--s-8); }

/* Entry animation — used by useEntryAnim */
.fade-in {
  opacity: 0;
  transform: translateY(6px);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

/* Sticky nav backdrop — only when scrolled */
.nav-stuck {
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

/* Scroll bar — subtle */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 999px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }