/* livv design tokens.
 *
 * Brand color is expressed as RGB-triplet CSS variables so (a) Tailwind can
 * apply opacity via `rgb(var(--brand-600) / <alpha-value>)` and (b) a clinic
 * can override its accent by setting these vars on a wrapper element without a
 * rebuild. Default scale = deep indigo/violet.
 */
:root {
  --brand-50: 238 242 255;
  --brand-100: 224 231 255;
  --brand-200: 199 210 254;
  --brand-300: 165 180 252;
  --brand-400: 129 140 248;
  --brand-500: 99 102 241;
  --brand-600: 79 70 229;   /* primary */
  --brand-700: 67 56 202;   /* primary hover */
  --brand-800: 55 48 163;
  --brand-900: 49 46 129;

  --brand-fg: 255 255 255;  /* text on brand surfaces */
}

/* Premium-modern base: crisp, higher-contrast, humanist type. */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-color: #f6f7fb;
  color: #0f172a;              /* slate-900 */
}

/* Very subtle brand-tinted page wash for depth. */
.app-bg {
  background:
    radial-gradient(60rem 40rem at 110% -10%, rgb(var(--brand-100) / 0.5), transparent 60%),
    radial-gradient(50rem 30rem at -10% 0%, rgb(var(--brand-50) / 0.7), transparent 55%);
}

/* Calm dashboard theme — soft clinical lavender, monochromatic (Notion-like).
   Scoped to the staff dashboard only (marketing keeps the indigo brand).
   To switch to baby blue, replace these triplets with a blue scale. */
.theme-clinic {
  --brand-50: 245 244 251;
  --brand-100: 236 233 248;
  --brand-200: 221 214 241;
  --brand-300: 198 186 230;
  --brand-400: 168 151 214;
  --brand-500: 141 120 198;
  --brand-600: 122 98 184;   /* soft primary */
  --brand-700: 100 78 158;
  --brand-800: 79 61 128;
  --brand-900: 62 49 102;
}
.clinic-bg { background-color: #f7f6fb; }   /* very light lavender */

/* Hide Alpine-cloaked elements until Alpine initializes. */
[x-cloak] { display: none !important; }

/* ============================================================
   Marketing motion & 2026 aesthetic (bold editorial / dark hero)
   ============================================================ */

/* Animated indigo -> violet -> fuchsia gradient text */
.gradient-text {
  background-image: linear-gradient(100deg, #818cf8, #a855f7, #ec4899, #a855f7, #818cf8);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gradient-pan 7s linear infinite;
}
@keyframes gradient-pan { to { background-position: 220% center; } }

/* Floating gradient orbs for the dark hero */
.orb { position: absolute; border-radius: 9999px; filter: blur(72px); opacity: .55; pointer-events: none; }
.orb-i { background: #4f46e5; }
.orb-v { background: #a855f7; }
.orb-f { background: #ec4899; }
@keyframes float-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(48px,-34px) scale(1.14); } }
@keyframes float-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,30px) scale(1.1); } }
@keyframes float-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(28px,40px) scale(1.08); } }
.float-a { animation: float-a 14s ease-in-out infinite; }
.float-b { animation: float-b 18s ease-in-out infinite; }
.float-c { animation: float-c 16s ease-in-out infinite; }

/* Subtle grain overlay for depth on dark sections */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.rd-1 { transition-delay: .08s; } .rd-2 { transition-delay: .16s; }
.rd-3 { transition-delay: .24s; } .rd-4 { transition-delay: .32s; }

/* Glowing CTA on dark */
.btn-glow {
  box-shadow: 0 10px 40px -10px rgba(168,85,247,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: box-shadow .3s, transform .2s;
}
.btn-glow:hover { box-shadow: 0 16px 60px -12px rgba(236,72,153,.7); transform: translateY(-2px); }

/* Fade in-down on load for hero */
@keyframes fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.fade-down { animation: fade-down .8s cubic-bezier(.16,1,.3,1) both; }

/* Briefing content fades/slides in when the lazy load swaps it in */
@keyframes brief-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.animate-in { animation: brief-in .5s cubic-bezier(.16,1,.3,1) both; }

/* 'Ask livv' breathing orb (wellness-themed thinking state) */
@keyframes breathe {
  0%, 100% { transform: scale(0.78); opacity: .55; }
  50%      { transform: scale(1.18); opacity: 1; }
}
@keyframes breathe-ring {
  0%   { transform: scale(0.7); opacity: .6; }
  100% { transform: scale(1.9); opacity: 0; }
}
.ai-orb {
  position: relative; width: 26px; height: 26px; border-radius: 9999px;
  background: radial-gradient(circle at 32% 30%, #c4b5fd, #6366f1 55%, #ec4899);
  box-shadow: 0 0 22px rgba(139, 92, 246, .55);
  animation: breathe 1.9s ease-in-out infinite;
}
.ai-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  border: 2px solid rgba(139, 92, 246, .4); animation: breathe-ring 1.9s ease-out infinite;
}

/* 'Ask livv' bar — floating pill with a live gradient edge + shine sweep */
@keyframes ask-sheen { to { background-position: 300% 0; } }
@keyframes ask-shine {
  0%, 55% { transform: translateX(-130%) skewX(-18deg); }
  100%    { transform: translateX(130%) skewX(-18deg); }
}
.ask-bar {
  background: linear-gradient(110deg, #6366f1, #8b5cf6, #d946ef, #a855f7, #6366f1);
  background-size: 300% 100%;
  animation: ask-sheen 7s linear infinite;
  box-shadow: 0 14px 44px -10px rgba(139, 92, 246, .55), 0 2px 8px -2px rgba(217, 70, 239, .35);
}
.ask-bar:focus-within {
  box-shadow: 0 18px 60px -8px rgba(139, 92, 246, .75), 0 0 0 3px rgba(196, 181, 253, .5);
}
.ask-shine {
  position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: ask-shine 5.5s ease-in-out infinite; pointer-events: none;
}

/* Appointment board — live cards */
.appt-card {
  position: relative; border: 1px solid rgb(226 232 240);
  border-left: 3px solid var(--accent, #8b5cf6);
  transition: transform .18s ease, box-shadow .18s ease;
  animation: brief-in .45s cubic-bezier(.16, 1, .3, 1) both;
}
.appt-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, var(--accent, #8b5cf6) 0%, transparent 22%); opacity: .05;
}
.appt-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(99, 102, 241, .4); }
.appt-card.is-now {
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, .35), 0 14px 36px -12px rgba(139, 92, 246, .5);
  animation: now-glow 2.6s ease-in-out infinite;
}
@keyframes now-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(139, 92, 246, .30), 0 12px 30px -14px rgba(139, 92, 246, .4); }
  50%      { box-shadow: 0 0 0 4px rgba(139, 92, 246, .16), 0 16px 44px -10px rgba(139, 92, 246, .6); }
}
@keyframes dot-ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
.dot-pulse { position: relative; }
.dot-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: inherit; animation: dot-ping 1.9s ease-out infinite;
}

/* Outcome-measure interpretation tones (dynamic class names — kept out of the
   Tailwind purge by living here as plain CSS) */
.tone-good { background: #d1fae5; color: #065f46; }
.tone-mild { background: #e0f2fe; color: #075985; }
.tone-warn { background: #fef3c7; color: #92400e; }
.tone-bad  { background: #ffe4e6; color: #9f1239; }

/* Body chart — anatomical regions (server-rendered SVG) + HTML pins */
.bc-outline { fill: #eef2ff; stroke: #c7d2fe; stroke-width: 2; }
.bc-region { fill: #dbe2f4; stroke: #fff; stroke-width: 1; cursor: pointer; transition: fill .12s ease; }
.bc-region:hover { fill: #a5b4fc; }
.bc-bone { stroke: #94a3b8; stroke-width: 6; stroke-linecap: round; }
.bc-dot { fill: #cbd5e1; stroke: #fff; stroke-width: 2; cursor: pointer; transition: fill .12s ease; }
.bc-dot:hover { fill: #818cf8; }
.bc-dot-nerve { fill: #fde68a; }
.bc-dot-nerve:hover { fill: #f59e0b; }
.bc-pin {
  width: 20px; height: 20px; border-radius: 9999px; padding: 0; line-height: 1;
  border: 2px solid #fff; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 5px rgba(2, 6, 23, .3);
}
.bc-pin-sel { box-shadow: 0 0 0 3px rgba(99, 102, 241, .55); }

@media (prefers-reduced-motion: reduce) {
  .gradient-text, .float-a, .float-b, .float-c, .fade-down, .animate-in,
  .ai-orb, .ai-orb::after, .ask-bar, .ask-shine,
  .appt-card, .appt-card.is-now, .dot-pulse::after { animation: none !important; }
  .appt-card { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}