/* ============================================
 * Base styles — JuriConnex Brandbook
 * ============================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

html, body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  transition:
    background-color var(--duration-base) var(--ease-smooth),
    color var(--duration-base) var(--ease-smooth);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss03', 'cv02', 'cv04';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

/* === Typography utilities === */

.t-display {
  font-size: 72px;
  line-height: 80px;
  letter-spacing: -2px;
  font-weight: 800;
}

.t-h1 {
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -1.5px;
  font-weight: 800;
}

.t-h2 {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -1px;
  font-weight: 700;
}

.t-h3 {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.5px;
  font-weight: 700;
}

.t-h4 {
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.3px;
  font-weight: 600;
}

.t-body-lg {
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}

.t-body {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.t-body-sm {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

.t-label {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.2px;
  font-weight: 500;
  text-transform: uppercase;
}

.t-mono {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 22px;
}

/* === Color utilities === */

.c-primary { color: var(--text-primary); }
.c-secondary { color: var(--text-secondary); }
.c-muted { color: var(--text-muted); }
.c-brand { color: var(--brand-primary); }

/* === Layout utilities === */

.container {
  width: 100%;
  max-width: var(--container-md);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-sm { max-width: var(--container-sm); }
.container-xs { max-width: var(--container-xs); }

section {
  padding-block: var(--space-24);
  position: relative;
}

section + section {
  border-top: 1px solid var(--border-light);
}

.section-bg-warm {
  background-color: var(--bg-warm);
}

.section-eyebrow {
  font-size: 13px;
  letter-spacing: 0.2px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.section-eyebrow .eyebrow-num {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  font-weight: 400;
}

.section-title {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -1px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  max-width: 720px;
}

.section-lede {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: var(--space-12);
}

/* === Mobile === */

@media (max-width: 768px) {
  .t-display { font-size: 48px; line-height: 56px; }
  .t-h1 { font-size: 36px; line-height: 44px; }
  .t-h2 { font-size: 28px; line-height: 36px; }
  .t-h3 { font-size: 22px; line-height: 30px; }
  .t-h4 { font-size: 18px; line-height: 26px; }

  .section-title { font-size: 28px; line-height: 36px; }
  section { padding-block: var(--space-16); }
}