/* Black At Work — global stylesheet entry point.
   Consumers link ONLY this file. It is @import lines + minimal resets. */
@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/elevation.css');

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  font-weight: var(--fw-med);
  letter-spacing: var(--ls-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-med);
}

/* Component interaction states (inline styles can't do :hover/:active) */
.baw-btn:hover { filter: brightness(1.08); }
.baw-btn:active { transform: translateY(1px); }
.baw-btn--secondary:hover { background: var(--ink-900); color: var(--paper-raised) !important; filter: none; }
.baw-btn--ghost:hover { background: var(--paper-sunk); filter: none; }
.baw-btn--primary:hover { filter: brightness(1.35); }
.baw-btn:disabled { opacity: 0.4; cursor: not-allowed; }