/* ============================================
   Base Styles
   Element-level defaults using tokens only.
   ============================================ */

@font-face {
  font-family: 'Gambarino';
  src: url('../ASSETS/fonts/Gambarino-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../ASSETS/fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../ASSETS/fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- Page wrapper --- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--page-padding-y) var(--page-padding);
  gap: var(--space-4);

  /* Theme-switch fade — class toggled by theme.js */
  transition: opacity 0.22s ease;
}

.page--fading {
  opacity: 0;
}

.page > main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-main-sections);
}

/* --- Typography utilities --- */
.heading-xl {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking);
  color: var(--color-text-primary);
}

.heading-lg {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking);
  color: var(--color-text-primary);
}

.heading-md {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking);
  color: var(--color-text-primary);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking);
  color: var(--color-text-body);
}

.body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking);
  color: var(--color-text-body);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking);
  color: var(--color-text-secondary);
}

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

/* --- Inline Text Links --- */
.text-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-border);
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
  outline: none;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--color-text-primary);
  text-decoration-color: var(--color-text-primary);
}

/* ============================================
   Global Scroll Blur Mask (Top & Bottom)
   ============================================ */

body::before,
body::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  height: clamp(4rem, 10vw, 8rem);
  pointer-events: none;
  z-index: 90;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.3s ease;
}

/* Top blur fades to transparent downwards */
body::before {
  top: 0;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

/* Bottom blur fades to transparent upwards */
body::after {
  bottom: 0;
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

/* ============================================
   Lenis Smooth Scroll Utilities
   ============================================ */

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}