/* Design tokens: shared CSS custom properties for the site's visual modernization
   pass (benchmarked against neumann-promotion-website). Loaded once, sitewide, via
   seoHead.njk before navbar.css/footer.css/homepage-hero.css/component styles so
   those files — and Shadow DOM components via addFrameworkCSS's adoptedStyleSheets,
   which custom properties already cross regardless — can consume them. */
:root {
  /* Color: brand blue standardized on #002B89 (fixes the #082c8c variant still
     present in navbar.css) + the existing shared cyan accent + neutral scale. */
  --color-primary-900: #001A54;
  --color-primary-700: #001F63;
  --color-primary-600: #002B89; /* canonical brand blue */
  --color-primary-100: #E6EAF6;
  --color-accent-cyan: rgb(52, 191, 255);
  --color-neutral-0: #ffffff;
  --color-neutral-50: rgb(245, 245, 245);
  --color-neutral-200: #e5e5e5;
  --color-neutral-500: #6b6b6b;
  --color-neutral-800: #2b2b2b;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-600) 55%, #0a4a8a 100%);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 30px rgba(0, 43, 137, 0.08);
  --shadow-lg: 0 20px 40px rgba(0, 43, 137, 0.12);
  --shadow-glow: 0 8px 24px rgba(0, 43, 137, 0.25);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.7s;

  /* Type scale (fluid) */
  --text-sm: clamp(0.85rem, 0.4vw + 0.75rem, 0.95rem);
  --text-base: 1rem;
  --text-lg: clamp(1.05rem, 0.6vw + 0.9rem, 1.2rem);
  --text-xl: clamp(1.4rem, 1.5vw + 1rem, 1.8rem);
  --text-2xl: clamp(1.8rem, 2.5vw + 1rem, 2.6rem);
  --text-3xl: clamp(2.2rem, 4vw + 1rem, 3.2rem);
  --text-5xl: clamp(2.4rem, 5vw + 1rem, 4.2rem);
}

/* !important: tokens.css loads before Bootstrap's own stylesheet in some page
   heads (seoHead.njk is included ahead of the bootstrap <link>), so an
   unqualified body rule here would lose to Bootstrap's later, equal-specificity
   body{font-family} rule. */
body {
  font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* The mobile off-canvas nav (.menu-pane, navbar.css) sits closed just off the
   right edge via `transform: translateX(105%)` — transformed geometry still
   counts toward the page's scrollable area even though nothing is visible
   there, which silently made every page horizontally scrollable by however
   many px the closed menu panel poked past the viewport edge. This is the
   standard fix for that off-canvas-menu class of bug. */
html, body {
  overflow-x: hidden;
}

/* Reveal-on-scroll: default state is fully visible so crawlers / no-JS clients
   always see real content. scrollReveal.js adds .reveal-armed right before it
   starts observing — that's what actually hides the element pending its
   scroll-triggered reveal. */
.reveal.reveal-armed {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) ease, transform var(--duration-slow) ease;
}
.reveal.reveal-armed.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"] { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .reveal.reveal-armed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Component: n-button — sitewide CTA, light DOM (public/js/common/components/Nbutton.js) */
n-button {
  display: inline-block;
}

n-button .applyButton {
  background: var(--color-primary-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.6rem;
  font-size: var(--text-base);
  font-weight: 600;
  text-align: center;
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast) var(--ease-out-expo);
}

n-button .applyButton:hover:not(:disabled) {
  background: var(--color-primary-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

n-button .applyButton:focus-visible {
  outline: 2px solid var(--color-primary-600);
  outline-offset: 2px;
}

n-button .applyButton.is-reverse {
  background: #fff;
  color: var(--color-primary-600);
  box-shadow: inset 0 0 0 2px var(--color-primary-600);
}

n-button .applyButton:disabled {
  background: var(--color-neutral-500);
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  n-button .applyButton { transition: none; }
}

/* Shared "catalog band" treatment used on enterprise pages (was a per-page
   inline background-color:#002B89;padding:3rem 5rem style, duplicated across
   vision.njk/news.njk) — token-driven gradient band around <visual-catalog>. */
.catalog-band {
  background: var(--gradient-brand);
  padding: 2rem;
  border-radius: var(--radius-lg);
  margin: 3rem;
}

@media (max-width: 768px) {
  .catalog-band {
    padding: 2rem 1.5rem;
    margin: 2rem 0;
  }
}