/* ============================================================
   Subpage shell — neutralizes legacy theme.css + Tailwind classes
   so old pages inherit the terminal-blueprint look without a
   line-by-line rewrite. Loaded on case studies + product pages
   AFTER tokens.css / base.css / components.css.
   ============================================================ */

/* Body bg + text follow the new theme tokens.
   NOTE: legacy theme.css declares `body.bg-black { background: hsl(var(--background)) !important }`
   which loads AFTER subpage-shell.css on Tally + Clementine. We bump specificity via
   `html body.bg-black` (0,0,1,2 > 0,0,1,1) so the new tokens win. */
html, body { font-family: var(--font-sans) !important; }
html body,
html body.bg-black,
html body.text-white,
html body.has-topbar,
html body.bg-black.has-topbar {
  background: var(--bg) !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
/* Also ensure inline-style body bg loses to ours */
html body[style*="background"] {
  background: var(--bg) !important;
}

/* Glass surfaces → hairline cards. Drop blur, drop the inset accent stripe. */
.glass,
.glass-heavy,
.glass-card,
.hover-card {
  background: var(--bg-raised) !important;
  border: 1px solid var(--rule) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: var(--r-md) !important;
}
.glass::before, .glass-heavy::before, .glass-card::before { content: none !important; }
.hover-card:hover { transform: none !important; box-shadow: 0 4px 16px oklch(0 0 0 / 0.18) !important; }

/* Gradient text → solid accent. Stop animations. */
.gradient-text,
.sp-gradient-text,
.kixie-gradient-text {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
  background-size: auto !important;
  animation: none !important;
}

/* Ambient effects → off */
.orb, .orb-soft, .orb-1, .orb-2, .orb-3,
.orb-soft-1, .orb-soft-2, .orb-soft-3,
.hero-orb-1, .hero-orb-2, .hero-orb-3,
.grid-lines, .interactive-glow, .flashlight, .flashlight-core,
.animated-border, .noise, #particle-canvas, .pulse-glow,
.bounce-emoji, .liquid-morph {
  display: none !important;
}

/* Per-team color pills + tag swatches → neutral tag */
.pill-kixie, .pill-simplepractice, .pill-redica,
.tag-ai, .tag-voice, .tag-sales, .tag-saas, .tag-management, .tag-teams,
.tag-agile, .tag-user, .tag-crisis, .tag-growth, .tag-plg, .tag-conversion {
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  color: var(--text-muted) !important;
}

/* Tailwind solid backgrounds in our redesigned regions → neutral fills */
.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-400, .bg-red-300, .bg-red-900\/20,
.bg-orange-500, .bg-orange-400,
.bg-yellow-500, .bg-yellow-400, .bg-amber-500, .bg-amber-400,
.bg-pink-500, .bg-pink-400,
.bg-purple-500, .bg-purple-400, .bg-purple-900\/20,
.bg-violet-500, .bg-fuchsia-500,
.bg-blue-500, .bg-blue-400, .bg-blue-900\/20, .bg-blue-600, .bg-blue-700,
.bg-indigo-500,
.bg-cyan-500, .bg-cyan-400,
.bg-teal-500, .bg-teal-400,
.bg-green-500, .bg-green-400, .bg-green-600, .bg-green-900\/20,
.bg-emerald-500, .bg-emerald-400,
.bg-sp-green, .bg-sp-blue, .bg-sp-purple, .bg-sp-orange, .bg-sp-yellow,
.bg-sp-green\/10, .bg-sp-blue\/10, .bg-sp-purple\/10, .bg-sp-orange\/10,
.bg-sp-green\/20, .bg-sp-blue\/20, .bg-sp-purple\/20, .bg-sp-orange\/20 {
  background-color: transparent !important;
}

/* Solid bar fills inside chart-card-like containers stay neutral; only chart-card classes
   from PR #134 keep their accent fills (those are scoped to .chart-card). */

/* Tailwind text colors → tokens */
.text-red-400, .text-red-500, .text-red-300 { color: var(--text-muted) !important; }
.text-orange-400, .text-amber-400, .text-yellow-400 { color: var(--accent) !important; }
.text-green-400, .text-green-500, .text-emerald-400 { color: var(--accent) !important; }
.text-blue-400, .text-blue-500, .text-cyan-400, .text-teal-400 { color: var(--accent) !important; }
.text-purple-400, .text-violet-400, .text-fuchsia-400, .text-pink-400 { color: var(--text) !important; }
.text-sp-green, .text-sp-blue, .text-sp-purple, .text-sp-orange, .text-sp-yellow { color: var(--accent) !important; }
.text-gray-300, .text-gray-200 { color: var(--text) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.text-gray-500, .text-gray-600 { color: var(--text-dim) !important; }
.text-white { color: var(--text) !important; }

/* Gradient utilities → off */
.bg-gradient-to-r, .bg-gradient-to-l, .bg-gradient-to-br, .bg-gradient-to-bl,
.bg-gradient-to-t, .bg-gradient-to-b, .bg-gradient-to-tr, .bg-gradient-to-tl {
  background-image: none !important;
}

/* Animations off (kept the new caret blink + paired-bar transition) */
.animate-pulse, .animate-bounce, .animate-spin, .animate-ping { animation: none !important; }

/* Preserve FitTracker celebration + confetti — explicit carve-outs */
.celebration-overlay, .celebration-content, .celebration-emoji,
.celebration-text, .celebration-subtext, .confetti-piece {
  animation: revert !important;
  background-color: revert !important;
  background: revert !important;
  border: revert !important;
  color: revert !important;
}
.confetti-piece { background: inherit !important; /* keeps the JS-set bg color */ }
.celebration-overlay { background: rgba(0, 0, 0, 0.55) !important; }
.celebration-content { background: var(--bg-raised) !important; border: 1px solid var(--rule-bright) !important; }

/* Borders that referenced loud colors → rule */
.border-red-500, .border-red-400, .border-red-500\/20, .border-red-500\/30, .border-red-500\/50 { border-color: var(--rule-bright) !important; }
.border-blue-500, .border-blue-400, .border-purple-500, .border-pink-500, .border-green-500, .border-orange-500 { border-color: var(--rule-bright) !important; }
.border-l-4 { border-left-width: 2px !important; border-left-color: var(--accent) !important; }

/* Apple/legacy buttons → standard btn */
.apple-button,
.password-button {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans) !important;
  box-shadow: none !important;
}
.apple-button:hover,
.password-button:hover {
  background: var(--teal-light) !important;
  border-color: var(--teal-light) !important;
  transform: none !important;
  box-shadow: none !important;
}
[data-theme="light"] .apple-button:hover,
[data-theme="light"] .password-button:hover {
  background: var(--teal-ink) !important;
  border-color: var(--teal-ink) !important;
}

/* Hide the old fixed nav so our topbar can take over */
nav.glass-heavy.fixed { display: none !important; }

/* Pad body since topbar is sticky and pages had pt-32 etc. for the fixed nav */
body.has-topbar { padding-top: 0; }

/* Common hero adjustments — drop pt-32 from sections that were compensating for fixed nav */
section.pt-32 { padding-top: var(--s-7) !important; }

/* Decision-timeline circles + per-step icons → mono numbered nodes */
.bg-orange-500.rounded-full, .bg-purple-500.rounded-full, .bg-blue-500.rounded-full,
.bg-pink-500.rounded-full, .bg-green-500.rounded-full, .bg-red-500.rounded-full,
.bg-yellow-500.rounded-full {
  background: transparent !important;
  border: 1px solid var(--rule-bright) !important;
  color: var(--text-muted) !important;
}

/* Scrollbar — match the new tokens */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--rule-bright); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ::selection */
::selection { background: var(--accent); color: var(--on-accent); }

/* Subpage card title accent (when something was using h3 with text-color brand) */
h1, h2, h3, h4 { font-family: var(--font-sans) !important; }

/* Modal backdrops in old pages */
.bg-black.bg-opacity-50, .bg-black.bg-opacity-70, .bg-black.bg-opacity-80, .bg-black.bg-opacity-90 {
  background: color-mix(in oklch, var(--bg-deep) 80%, transparent) !important;
  backdrop-filter: blur(8px);
}