/* Global variables and base styles */

/* Modern scroll margin to handle fixed headers */
section[id] {
  scroll-margin-top: 90px; /* Fixed header height and margin. */
}

:root {
  /* Colors */
  --primary-color: #4f46e5;
  --secondary-color: #7c3aed;
  --light-bg: #f9fafb;
  --dark-bg: #111827;
  --text-dark: #1f2937;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Dark background by default - matches footer color for clean overscroll */
  background-color: var(--dark-bg);
  overflow-x: hidden;
}

body {
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif;
  color: var(--text-dark);
  background-color: var(--light-bg);
  position: relative;
  overflow-x: hidden;
  touch-action: pan-y pinch-zoom;
}

/* First paint in the visitor's theme (html[data-theme], set by managers/core/ThemeCore.js).
   :where() keeps the body specificity, so each page family's own background still wins. */
:where(:root[data-theme='dark']) body {
  background-color: #090518;
}

:where(:root[data-theme='light']) body {
  background-color: #ffffff;
}

#global-background-fade {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: inherit;
  opacity: 1;
  transition: opacity 500ms ease;
}

body.page-bg-ready #global-background-fade {
  opacity: 0;
}

#app {
  position: relative;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Prevent layout shifts before modal styles load. */
.modal {
  position: fixed;
  inset: 0;
  display: none;
}

.modal.active {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.4s !important;
    transition-duration: 0.2s !important;
  }

  #global-background-fade {
    transition: none !important;
  }
}

/* Brand app icon (header + footer): square artwork, rounded like an app icon */
.brand-logo__mark {
  display: inline-block;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  vertical-align: middle;
}

.brand-logo__name {
  letter-spacing: -0.02em;
}