/* ═══════════════════════════════════════════
   Base — Typography & Global Styles
   ═══════════════════════════════════════════ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-on-dark);
  background-color: var(--color-dark);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ── Headings — Recoleta, uppercase ── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

h1 {
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
}

h2 {
  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
}

h3 {
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
}

h4 {
  font-size: var(--text-xl);
}

/* ── Body Text ── */
p {
  max-width: 65ch;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
}

/* ── Links ── */
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Section Label — Futura/Jost, uppercase ── */
.section-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-black-accent);
}

/* ── Dark / Light Section Themes ── */
.section--dark {
  background-color: var(--color-dark);
  color: var(--text-on-dark);
}

.section--light {
  background-color: var(--color-light);
  color: var(--text-on-light);
}

.section--light .section-label {
  color: var(--color-black-accent);
}

.section--light p {
  color: var(--text-on-light-muted);
}

.section--light h2,
.section--light h3 {
  color: var(--text-on-light);
}

.section--white {
  background-color: var(--color-white);
  color: var(--text-on-light);
}

.section--white p {
  color: var(--text-on-light-muted);
}

/* ── Selection ── */
::selection {
  background: var(--color-accent-soft);
  color: var(--color-dark);
}

/* ── Mobile Tap Feedback (#44) ── */
@media (hover: none) and (pointer: coarse) {
  a, button, .btn, .card, .portfolio-card {
    -webkit-tap-highlight-color: transparent;
  }

  .btn:active {
    transform: scale(0.96);
    opacity: 0.85;
  }

  .card:active,
  .portfolio-card:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

/* ── Mobile Touch Targets (#43 — 44px min WCAG) ── */
@media (max-width: 768px) {
  .site-nav__link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .site-footer__col a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .btn {
    min-height: 44px;
  }
}

/* ── Print Stylesheet (#45) ── */
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
    text-transform: none;
  }

  .site-nav,
  .site-nav__toggle,
  .back-to-top,
  .scroll-indicator,
  .hero__video,
  .page-hero__video {
    display: none !important;
  }

  .hero,
  .page-hero,
  .section--dark,
  .section--light,
  .section--white {
    background: #fff !important;
    color: #000 !important;
    padding: 1rem 0;
    min-height: auto;
  }

  h1, h2, h3, h4 {
    color: #000 !important;
    page-break-after: avoid;
  }

  p, li {
    color: #333 !important;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }

  a[href^="#"]::after,
  a[href^="/"]::after {
    content: '';
  }

  .card, .portfolio-card {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ddd;
  }
}