/* ==========================================================================
   Encaixa — Base / Reset Styles
   ==========================================================================
   Minimal CSS reset + global typography and utility classes.
   Depends on css/tokens.css (import first).

   Spacing tokens are used consistently here:
     - Paragraph margins → var(--space-base)  (16px)
     - List padding      → var(--space-xl)    (24px)
     - Code inline       → var(--space-2xs)/var(--space-xs)
     - Pre blocks        → var(--space-md)    (12px)
     - Container gutters → var(--section-padding-x)
     - Section padding   → var(--section-padding-y)
   ---------------------------------------------------------------------- */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-primary);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------
   TYPOGRAPHY — heading & text classes
   ------------------------------------------------------------------
   All headings reference token values for size, weight, and line-height.
   Consistent line-height per heading tier:
     H1 → 1.2  | H2 → 1.25 | H3 → 1.3 | H4 → 1.35
     H5/H6 → 1.4
   Body paragraphs use var(--text-body-lh) = 1.6 for readability.
   ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
  font-weight: var(--font-weight-bold);
  letter-spacing: normal;
}

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  letter-spacing: var(--text-h1-letter-spacing);
}

h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--text-h2-weight);
  letter-spacing: var(--text-h2-letter-spacing);
}

h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
}

h4 {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  font-weight: var(--text-h4-weight);
}

h5 {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line-height);
  font-weight: var(--text-h5-weight);
}

h6 {
  font-size: var(--text-h6-size);
  line-height: var(--text-h6-line-height);
  font-weight: var(--text-h6-weight);
}

p {
  margin-bottom: var(--space-base);
}

a {
  color: var(--text-link-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--text-link-hover);
}

small {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  color: var(--text-secondary);
}

strong {
  font-weight: var(--font-weight-semibold);
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

code {
  background: var(--bg-muted);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
}

pre {
  background: var(--bg-muted);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: var(--text-body-lh);
}

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

ul, ol {
  padding-left: var(--space-xl);
  margin-bottom: var(--space-base);
}

li {
  margin-bottom: var(--space-2xs);
}

/* ------------------------------------------------------------------
   UTILITY CLASSES
   ------------------------------------------------------------------
   All utilities reference spacing/size tokens — never hardcoded values.
   This ensures every component in the design system stays consistent.
   ------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
}

.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: calc(-1 * var(--space-xs));
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-right { text-align: right; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

.w-full { width: 100%; }
.h-full { height: 100%; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Focus visible for accessibility — uses brand-colored ring. */
:focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}