/* ==========================================================================
   base.css — reset, type scale, container, chassis, grid background
   Consumes: tokens.css (all custom properties)
   Produces: .container, .display, .headline, .subheading, .lede, .eyebrow,
             .section-marker, .mono, .chassis-top, .chassis-bottom,
             .signal-orange, .signal-green, .signal-yellow
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Box-sizing reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   2. Root / body — canvas, type, grid background
   -------------------------------------------------------------------------- */
html {
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-light);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  -webkit-font-smoothing: antialiased;
  /* Hairline grid: 56 px column repeat using two perpendicular gradients */
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  /* Kill horizontal scroll on mobile if any child slightly exceeds the
     viewport. `clip` (not `hidden`) does not create a scroll container, so the
     sticky nav island keeps sticking to the viewport. */
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   3. Links
   -------------------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
}

a:where(:not(.card):not(.instrument-card):not(.btn):not(.nav-brand):not(.lablog-row):not(.nav-links a)):hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. Focus
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Media defaults
   -------------------------------------------------------------------------- */
img,
video,
svg {
  display: block;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   6. Layout — container
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-24);
}

/* --------------------------------------------------------------------------
   7. Type scale — display
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

/* --------------------------------------------------------------------------
   8. Type scale — headline
   -------------------------------------------------------------------------- */
.headline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
}

/* --------------------------------------------------------------------------
   9. Type scale — subheading
   -------------------------------------------------------------------------- */
.subheading {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subheading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
}

/* --------------------------------------------------------------------------
   10. Type scale — lede (body lead paragraph)
   -------------------------------------------------------------------------- */
.lede {
  font-size: var(--text-subheading);
  line-height: var(--leading-body);
  color: var(--fg-2);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   11. Type scale — mono label utilities
   -------------------------------------------------------------------------- */
.eyebrow,
.section-marker,
.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--text-caption);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   12. Chassis frames — top and bottom metadata bars
   -------------------------------------------------------------------------- */
.chassis-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--hair);
  padding: var(--space-12) 0;
}

.chassis-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--hair);
  padding: var(--space-12) 0;
}

/* --------------------------------------------------------------------------
   13. Signal color helpers
   -------------------------------------------------------------------------- */
.signal-orange {
  color: var(--orange);
}

.signal-green {
  color: var(--green);
}

.signal-yellow {
  color: var(--yellow);
}