/* =================================================================
   Vocalis Studio — Design Tokens
   Ported 1:1 from the Lovable / Tailwind v4 design reference
   (src/styles.css). Do not change values here without checking
   the reference — this is the single source of visual truth.
   ================================================================= */

:root {
  /* ---- Radius scale (matches the reference's --radius overrides) ---- */
  --radius: 1.25rem;            /* 20px */
  --r-sm: calc(var(--radius) - 6px);   /* 14px */
  --r-md: calc(var(--radius) - 2px);   /* 18px */
  --r-lg: var(--radius);                /* 20px */
  --r-xl: calc(var(--radius) + 6px);    /* 26px */
  --r-2xl: calc(var(--radius) + 12px);  /* 32px */
  --r-3xl: calc(var(--radius) + 18px);  /* 38px */
  --r-full: 9999px;

  /* ---- Type ---- */
  --font-display: "SF Pro Display", "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Core palette (OKLCH, matches reference exactly) ---- */
  --background: #fafafd;
  --background: oklch(0.99 0.003 250);
  --foreground: #1e1b4b;
  --foreground: oklch(0.18 0.02 265);

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.02 265);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.02 265);

  --primary: oklch(0.55 0.18 275);
  --primary-foreground: oklch(0.99 0.003 250);
  --secondary: #f5f5fb;
  --secondary: oklch(0.97 0.008 260);
  --secondary-foreground: #3f3f70;
  --secondary-foreground: oklch(0.25 0.03 265);
  --muted: oklch(0.965 0.008 255);
  --muted-foreground: #6b7280;
  --muted-foreground: oklch(0.5 0.02 260);
  --accent: oklch(0.95 0.02 275);
  --accent-foreground: oklch(0.25 0.03 265);
  --destructive: oklch(0.62 0.22 25);
  --destructive-foreground: oklch(0.99 0 0);

  --border: #e5e7eb;
  --border: oklch(0.92 0.01 260);
  --input: oklch(0.94 0.008 260);
  --ring: oklch(0.65 0.15 275);

  --brand-blue:   #5b9cf6;
  --brand-purple: #8b5cf6;
  --brand-pink:   #e07bd0;

  --surface: #f9f9fd;
  --surface-elevated: #ffffff;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.5);

  /* ---- Card shape tokens ----
     Single source of truth for the repeated card surfaces (Features,
     Testimonials). Changing the rounding or hairline weight of every card in
     the theme is now a one-line edit rather than a search-and-replace. */
  --r-card: var(--r-3xl);            /* 38px — unchanged from the hard-coded value */
  --card-border-width: 1px;          /* unchanged from .vx-glass-panel's border */

  /* ---- Shadows ---- */
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(15, 23, 42, 0.08);
  --shadow-elevated: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 24px 60px -20px rgba(79, 70, 229, 0.18);
  --shadow-glow: 0 20px 60px -12px rgba(139, 92, 246, 0.4);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px -12px rgba(15, 23, 42, 0.12);

  /* ---- Gradients — strengthened to match Lovable reference ---- */
  --gradient-hero:
    radial-gradient(65% 55% at 50% 0%,  rgba(139, 92, 246, 0.30) 0%, transparent 70%),
    radial-gradient(55% 45% at 92% 18%, rgba(91, 156, 246, 0.32) 0%, transparent 70%),
    radial-gradient(50% 40% at  8% 30%, rgba(224, 123, 208, 0.22) 0%, transparent 70%);
  --gradient-brand: linear-gradient(135deg, #5b9cf6, #8b5cf6);
  --gradient-soft: linear-gradient(180deg, #fcfcff 0%, #f5f4fd 100%);
}

/* ---- Base ---- */
* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body.vx {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  letter-spacing: -0.011em;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

.vx h1, .vx h2, .vx h3, .vx h4, .vx h5,
.vx .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

.vx img { max-width: 100%; display: block; }
.vx a { color: inherit; text-decoration: none; }
.vx button { font-family: inherit; cursor: pointer; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .vx, .vx * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* =================================================================
   Signature utilities (ported from the reference's @utility blocks)
   ================================================================= */

.vx-glass-panel {
  background: rgba(255, 255, 255, 0.62);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

.vx-glass-nav {
  background: rgba(252, 252, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

.vx-hero-bg {
  /* Fallback direct rgba for full cross-browser support */
  background-image:
    radial-gradient(65% 55% at 50% 0%,  rgba(139, 92, 246, 0.30) 0%, transparent 70%),
    radial-gradient(55% 45% at 92% 18%, rgba(91, 156, 246, 0.32) 0%, transparent 70%),
    radial-gradient(50% 40% at  8% 30%, rgba(224, 123, 208, 0.22) 0%, transparent 70%);
  /* Enhanced with CSS variable override */
  background-image: var(--gradient-hero);
}
.vx-brand-gradient { background-image: var(--gradient-brand); }

.vx-brand-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vx-shadow-soft { box-shadow: var(--shadow-soft); }
.vx-shadow-elevated { box-shadow: var(--shadow-elevated); }
.vx-shadow-glow { box-shadow: var(--shadow-glow); }

/* ---- Keyframes ---- */
@keyframes vx-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.08); }
  66% { transform: translate(-25px, 25px) scale(0.95); }
}
@keyframes vx-float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes vx-rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes vx-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes vx-wave {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
@keyframes vx-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes vx-shake-x {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  90% { transform: translateX(1px); }
}

/* PERF NOTE — `will-change` permanently pins an element onto its own GPU
   layer for the entire life of the page. That is the right trade only for
   large elements whose animation never stops. For short one-shot entrance
   animations (rise / pop / shake) the browser already promotes the element
   automatically while the animation runs and releases the layer the moment
   it finishes, so a permanent hint only wastes GPU memory — and GPU memory
   pressure is what makes a phone start dropping scroll frames. Same reason
   `.vx-animate-wave` no longer promotes each 3px bar: a hero waveform is
   28 bars, which meant 28 permanent layers. They are now painted inside one
   promoted, paint-contained parent (see perf.css `.vx-waveform`), which is
   visually identical and ~28x cheaper to composite. */
.vx-animate-blob  { animation: vx-blob-float 18s ease-in-out infinite; will-change: transform; transform: translateZ(0); }
.vx-animate-float { animation: vx-float-y 6s ease-in-out infinite; will-change: transform; transform: translateZ(0); }
.vx-animate-rise  { animation: vx-rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.vx-animate-pop   { animation: vx-scale-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.vx-animate-wave  { animation: vx-wave 1.1s ease-in-out infinite; }
.vx-animate-shake { animation: vx-shake-x 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

@keyframes vx-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.vx-animate-pulse { animation: vx-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes vx-spin {
  to { transform: rotate(360deg); }
}
.vx-animate-spin { animation: vx-spin 1s linear infinite; display: inline-flex; will-change: transform; }

.vx-shimmer-bg {
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--foreground) 6%, transparent), transparent);
  background-size: 200% 100%;
  animation: vx-shimmer 1.8s linear infinite;
}

/* =================================================================
   Generic layout helpers (not in the reference verbatim — these
   stand in for the Tailwind utility classes used everywhere there,
   since this theme ships plain CSS rather than a Tailwind build)
   ================================================================= */

.vx-container        { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
.vx-container-narrow  { width: 100%; max-width: 48rem; margin-inline: auto; padding-inline: 1.25rem; }
.vx-container-prose   { width: 100%; max-width: 42rem; margin-inline: auto; padding-inline: 1.25rem; }

.vx-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vx-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.vx-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-foreground);
}

.vx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}
.vx-btn:active { transform: scale(0.98); }

.vx-btn-gradient {
  background-image: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.vx-btn-gradient:hover { transform: scale(1.03); }

.vx-btn-glass {
  background: rgba(255, 255, 255, 0.62);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 12px rgba(0,0,0,0.06);
  color: var(--foreground);
}
.vx-btn-glass:hover { transform: translateY(-2px); }

.vx-btn-secondary {
  background: var(--secondary);
  color: var(--foreground);
}
.vx-btn-secondary:hover { background: var(--accent); }

.vx-icon-badge {
  display: grid;
  place-items: center;
  border-radius: var(--r-xl);
  background-image: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
}
.vx-icon-badge--2xl { border-radius: var(--r-2xl); }

.vx-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(64px);
  pointer-events: none;
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .vx-animate-blob, .vx-animate-float, .vx-animate-wave, .vx-shimmer-bg, .vx-animate-pulse, .vx-animate-spin { animation: none; }
}

/* ── Performance: reduce blur on mobile to avoid GPU overload ── */
@media (max-width: 639px) {
  .vx-glass-panel {
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
  }
}

/* ── Smooth scrolling on touch devices ──
   `scroll-behavior: smooth` is already declared on html above; repeating it
   here only made the cascade do redundant work. */
html { -webkit-overflow-scrolling: touch; }

/* ── Contain layout for app cards to reduce repaints ──
   `contain: layout style` tells the browser that nothing inside a card can
   ever affect the geometry of anything outside it, so a re-layout inside one
   card can never invalidate the rest of the page. Paint containment is
   deliberately NOT included here because several of these cards have glows
   and badges that bleed outside their own box on purpose. */
.vx-card, .vx-feature-card, .vx-pricing-card, .vx-testimonial-card {
  contain: layout style;
}

/* ══════════════════════════════════════════════════════════════════════
   THEME SWITCH — suppress transitions for the duration of the flip
   ══════════════════════════════════════════════════════════════════════
   A theme change rewrites every colour token at once. Elements with no
   colour transition repaint immediately; the dozen or so that DO carry
   `transition: background-color .2s` ease across over the next 200ms.
   The result is not one change but two: an instant flip, then a second,
   slower one catching up behind it — which reads as a double flash.

   This class is added a frame before the attribute flips and removed a
   frame after, so every element crosses over together, in one repaint.
   `!important` is warranted here: it has to beat every transition in the
   codebase without knowing what they are, and it is live for two frames.
   ══════════════════════════════════════════════════════════════════════ */
.vx-theme-switching,
.vx-theme-switching *,
.vx-theme-switching *::before,
.vx-theme-switching *::after {
	transition: none !important;
	animation-duration: 0.01ms !important;
	animation-delay: 0ms !important;
}