/**
 * Little Black Book — Base
 * -----------------------------------------------------------------------------
 * Applied to every page. Loads AFTER tokens.css and BEFORE components.css.
 * Keep this file small — it only sets up the document shell and typography.
 * Everything else belongs in components.css or a page-specific file.
 * -----------------------------------------------------------------------------
 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--lbb-surface-canvas);
}

body {
  margin: 0;
  font-family: var(--lbb-font-sans);
  font-size: var(--lbb-text-base);
  line-height: 1.55;
  font-weight: var(--lbb-weight-regular);
  color: var(--lbb-text-body);
  background: var(--lbb-surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--lbb-duration-normal) var(--lbb-ease),
              color var(--lbb-duration-normal) var(--lbb-ease);
}

/* Headings: Poppins already set via font-family on body; override weight/tracking */
h1, h2, h3, h4, h5, h6 {
  color: var(--lbb-text-primary);
  font-weight: var(--lbb-weight-bold);
  margin: 0 0 var(--lbb-space-3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
h1 { font-size: var(--lbb-text-3xl); letter-spacing: -0.03em; }
h2 { font-size: var(--lbb-text-2xl); }
h3 { font-size: var(--lbb-text-xl); }
h4 { font-size: var(--lbb-text-lg); }
h5 { font-size: var(--lbb-text-md); }
h6 { font-size: var(--lbb-text-sm); text-transform: uppercase; letter-spacing: 0.08em; }

p { margin: 0 0 var(--lbb-space-4); }

a {
  color: var(--lbb-text-link);
  text-decoration: none;
  transition: color var(--lbb-duration-fast) var(--lbb-ease);
}
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--lbb-focus-ring);
  border-radius: var(--lbb-radius-sm);
}

hr {
  border: 0;
  height: 1px;
  background: var(--lbb-border-subtle);
  margin: var(--lbb-space-6) 0;
}

img, svg { max-width: 100%; display: block; }

::selection {
  background: var(--lbb-brand-violet-400);
  color: var(--lbb-text-on-brand);
}

/* Legacy helper: scroll offset for anchor navigation with sticky headers */
[id] { scroll-margin-top: 80px; }