/* ATC tokens — Tailwind classes assume these are set in tailwind.config.
   This file holds the supplemental utilities the source codebase keeps
   inline in each page's <style> block. */

html { scroll-behavior: smooth; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #F8FBFF;
  color: #0B1736;
}

/* Signature gradients */
.hero-grid {
  background-image:
    radial-gradient(circle at 18% 12%, rgba(245,200,94,.18), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(132,190,255,.34), transparent 32%),
    linear-gradient(135deg, #173B86 0%, #3478F6 58%, #8ACBFF 100%);
}
.soft-grid {
  background-image:
    linear-gradient(rgba(52,120,246,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,120,246,.045) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Floating orbs used as hero decoration */
.orb { position: absolute; border-radius: 999px; filter: blur(2px); opacity: .76; pointer-events: none; }

/* Glass — used by sticky header */
.glass {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.58);
}

/* Card hover (the only hover transform in the system) */
.card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 42px rgba(20,58,134,.10); }

/* Chip, kicker, icon bubble — primitives that appear inline-styled in the source */
.chip { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; padding: .45rem .75rem; font-size: .78rem; font-weight: 700; }
.section-kicker { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; background: #EEF6FF; color: #3478F6; font-weight: 800; font-size: .78rem; padding: .45rem .75rem; }
.icon-bubble {
  width: 2.35rem; height: 2.35rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: .85rem;
  background: linear-gradient(135deg, #F6FAFF, #FFF8EA);
  box-shadow: inset 0 0 0 1px rgba(52,120,246,.07);
  font-size: 1.02rem;
}
.section-title { font-size: clamp(2rem, 4vw, 3.6rem); line-height: .98; letter-spacing: -.04em; font-weight: 900; }
.section-copy  { font-size: 1.05rem; color: #45526F; line-height: 1.75; }

/* Animations */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float-anim { animation: float 4s ease-in-out infinite; }
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(245,200,94,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(245,200,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,200,94,0); }
}
.pulse-gold { animation: pulse-ring 2.2s ease-out infinite; }

/* Diagnostic selected glow */
.diagnostic-card.selected {
  background: #FFF8EA;
  border-color: #F5C85E;
  box-shadow: 0 0 0 3px rgba(245,200,94,.35), 0 16px 42px rgba(20,58,134,.10);
}

/* Prose article (used by ModuleReader) */
.prose-article h2 { font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; color: #0B1736; margin: 2.5rem 0 .75rem; line-height: 1.2; }
.prose-article h3 { font-size: 1.15rem; font-weight: 800; color: #143A86; margin: 1.75rem 0 .5rem; }
.prose-article p  { font-size: 1.05rem; line-height: 1.85; color: #374151; margin-top: 1rem; }
.prose-article ul { margin-top: 1rem; padding-left: 1.5rem; list-style: none; }
.prose-article ul li { position: relative; padding-left: 1.5rem; margin-top: .6rem; font-size: 1rem; line-height: 1.75; color: #374151; }
.prose-article ul li::before { content: "→"; position: absolute; left: 0; color: #3478F6; font-weight: 900; }
.prose-article strong { color: #0B1736; font-weight: 800; }
.prose-article blockquote { border-left: 4px solid #3478F6; padding: .75rem 1.25rem; background: #EEF6FF; border-radius: 0 1rem 1rem 0; margin: 1.5rem 0; font-size: 1rem; color: #143A86; font-weight: 700; line-height: 1.7; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }