/* ============================================================
   VidWords "Colorburst" theme — ultimate color recommendation.
   Keeps amber as the brand/CTA anchor (conversion continuity),
   adds three harmonized supporting hues for role-based color:
     · Teal   — Watch / AI understanding (the second flagship)
     · Coral  — energy: CTA gradient tail, highlights, step 3
     · Violet — developers / API
   All scoped under html[data-vw-theme="colorburst"], so the
   original ink-&-amber theme stays intact underneath.
   ============================================================ */

html[data-vw-theme="colorburst"] {
  /* supporting hue tokens (light) */
  --vw-teal: #0e8a80;
  --vw-teal-dark: #0b6d65;
  --vw-teal-soft: #e2f4f1;
  --vw-teal-border: #bde4dd;
  --vw-coral: #e05a3c;
  --vw-coral-dark: #c24730;
  --vw-coral-soft: #fdeae4;
  --vw-coral-border: #f7cfc2;
  --vw-violet: #7a5bc0;
  --vw-violet-dark: #6547a6;
  --vw-violet-soft: #f0eafb;
  --vw-violet-border: #dccff3;
  --vw-blue: #2f6fce;
  --vw-blue-soft: #e8f0fc;
  --vw-blue-border: #c9dcf6;

  /* CTA warms into coral at the tail — more vivid, still amber-first */
  --cta-grad: linear-gradient(135deg, #f6b53c 0%, #f0942a 55%, #ec7434 100%);
  --accent-grad: linear-gradient(135deg, #f4b03a 0%, #ee8524 100%);
  --cta-glow: 0 4px 22px -4px rgba(238, 128, 46, .5);

  /* Watch register moves from brown-amber ink to deep teal */
  --watch-ink: #0e7c73;
  --watch-ink-hover: #0b6a62;
  --on-watch-ink: #ecfffb;

  /* ambient auras become two-hue: amber left, teal right */
  --aura-1: color-mix(in srgb, var(--accent-2) 14%, transparent);
  --aura-2: color-mix(in srgb, var(--vw-teal) 11%, transparent);
}
html[data-theme="dark"][data-vw-theme="colorburst"] {
  --vw-teal: #34d3c3;
  --vw-teal-dark: #6ee6d9;
  --vw-teal-soft: #0b2723;
  --vw-teal-border: #17493f;
  --vw-coral: #ff8a6e;
  --vw-coral-dark: #ffa48c;
  --vw-coral-soft: #2c1610;
  --vw-coral-border: #5a2818;
  --vw-violet: #b79bef;
  --vw-violet-dark: #c9b3f5;
  --vw-violet-soft: #201636;
  --vw-violet-border: #3a2a5e;
  --vw-blue: #7fb0f2;
  --vw-blue-soft: #101d33;
  --vw-blue-border: #23406b;

  --cta-grad: linear-gradient(135deg, #f8ba44 0%, #f1912b 55%, #ee6f3a 100%);
  --accent-grad: linear-gradient(135deg, #f8ba44 0%, #ef8c22 100%);
  --cta-glow: 0 4px 28px -4px rgba(241, 145, 43, .5);
  --watch-ink: #16a394;
  --watch-ink-hover: #1db4a4;
  --on-watch-ink: #04211d;
  --aura-1: color-mix(in srgb, var(--accent-2) 18%, transparent);
  --aura-2: color-mix(in srgb, var(--vw-teal) 14%, transparent);
}

/* ── ambient: three-hue site background (amber / teal / faint coral) ── */
html[data-vw-theme="colorburst"] body {
  background:
    radial-gradient(58% 46% at 22% -6%, var(--aura-1), transparent 62%),
    radial-gradient(46% 42% at 86% -2%, var(--aura-2), transparent 64%),
    radial-gradient(34% 30% at 55% 8%, color-mix(in srgb, var(--vw-coral) 6%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* ── hero: two-tone glow behind copy + demo panel ── */
html[data-vw-theme="colorburst"] .lp-demo::before {
  background:
    radial-gradient(ellipse 55% 65% at 42% 55%, color-mix(in srgb, var(--accent-2) 17%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 55% at 72% 45%, color-mix(in srgb, var(--vw-teal) 13%, transparent), transparent 72%);
}

/* ── trust strip: each proof point gets its own hue ── */
html[data-vw-theme="colorburst"] .trust > div:nth-child(1) .icon { color: var(--accent); }
html[data-vw-theme="colorburst"] .trust > div:nth-child(2) .icon { color: var(--vw-teal); }
html[data-vw-theme="colorburst"] .trust > div:nth-child(3) .icon { color: var(--green); }
html[data-vw-theme="colorburst"] .trust > div:nth-child(4) .icon { color: var(--vw-violet); }
html[data-vw-theme="colorburst"] .trust > div:nth-child(5) .icon { color: var(--vw-coral); }

/* ── problem → solution points: rotating icon hues ── */
html[data-vw-theme="colorburst"] .lp-points .lp-point:nth-child(3n+1) svg { color: var(--accent); }
html[data-vw-theme="colorburst"] .lp-points .lp-point:nth-child(3n+2) svg { color: var(--vw-teal); }
html[data-vw-theme="colorburst"] .lp-points .lp-point:nth-child(3n+3) svg { color: var(--vw-coral); }
html[data-vw-theme="colorburst"] .lp-points .lp-point:nth-child(3n+4) svg { color: var(--vw-violet); }

/* ── how it works: numbered chips walk amber → teal → coral ── */
html[data-vw-theme="colorburst"] .step:nth-child(2) .num {
  background: linear-gradient(135deg, #17b3a6 0%, #0e8a80 100%);
  color: #ecfffb;
  box-shadow: 0 3px 10px -3px var(--vw-teal);
}
html[data-vw-theme="colorburst"] .step:nth-child(3) .num {
  background: linear-gradient(135deg, #f0805a 0%, #e05a3c 100%);
  color: #fff3ec;
  box-shadow: 0 3px 10px -3px var(--vw-coral);
}
html[data-vw-theme="colorburst"] .step:nth-child(2):hover { border-color: color-mix(in srgb, var(--vw-teal) 42%, var(--border)); }
html[data-vw-theme="colorburst"] .step:nth-child(3):hover { border-color: color-mix(in srgb, var(--vw-coral) 42%, var(--border)); }

/* ── Watch flagship: full teal register ── */
html[data-vw-theme="colorburst"] #watch .lp-eyebrow {
  color: var(--vw-teal-dark);
  background: var(--vw-teal-soft);
  border-color: var(--vw-teal-border);
}
html[data-vw-theme="colorburst"] #watch .lp-point svg { color: var(--vw-teal); }
html[data-vw-theme="colorburst"] .lp-jr::before {
  background: radial-gradient(ellipse 60% 70% at 50% 55%, color-mix(in srgb, var(--vw-teal) 16%, transparent), transparent 70%);
}
html[data-vw-theme="colorburst"] .lp-jr-tab.active { background: var(--vw-teal-soft); color: var(--vw-teal-dark); border-color: var(--vw-teal-border); }
html[data-vw-theme="colorburst"] .lp-jr-tldr { background: var(--vw-teal-soft); border-color: var(--vw-teal-border); }
html[data-vw-theme="colorburst"] .lp-jr-tldr strong { color: var(--vw-teal-dark); }
html[data-vw-theme="colorburst"] .lp-jr-ts { color: var(--vw-teal-dark); background: var(--vw-teal-soft); border-color: var(--vw-teal-border); }

/* ── features grid: one hue per capability ── */
html[data-vw-theme="colorburst"] .lp-feature:nth-child(2) .fic { background: var(--vw-teal-soft); border-color: var(--vw-teal-border); color: var(--vw-teal); }
html[data-vw-theme="colorburst"] .lp-feature:nth-child(3) .fic { background: var(--vw-coral-soft); border-color: var(--vw-coral-border); color: var(--vw-coral); }
html[data-vw-theme="colorburst"] .lp-feature:nth-child(4) .fic { background: var(--vw-violet-soft); border-color: var(--vw-violet-border); color: var(--vw-violet); }
html[data-vw-theme="colorburst"] .lp-feature:nth-child(5) .fic { background: var(--vw-blue-soft); border-color: var(--vw-blue-border); color: var(--vw-blue); }
html[data-vw-theme="colorburst"] .lp-feature:nth-child(6) .fic { background: var(--vw-teal-soft); border-color: var(--vw-teal-border); color: var(--vw-teal-dark); }

/* ── API showcase: violet developer register ── */
html[data-vw-theme="colorburst"] .lp-api-more { color: var(--vw-violet-dark); }
html[data-vw-theme="colorburst"] .lp-code .k { color: #f2a83c; }
html[data-vw-theme="colorburst"] .lp-code .s { color: #6ed4a0; }
html[data-vw-theme="colorburst"] .lp-code .p { color: #9db9f2; }

/* ── use cases: one hue per audience ── */
html[data-vw-theme="colorburst"] .grid-2 > .card:nth-child(1) .ic { background: var(--vw-coral-soft); border-color: var(--vw-coral-border); }
html[data-vw-theme="colorburst"] .grid-2 > .card:nth-child(1) .ic .icon { color: var(--vw-coral); }
html[data-vw-theme="colorburst"] .grid-2 > .card:nth-child(2) .ic { background: var(--accent-soft); border-color: var(--accent-soft-border); }
html[data-vw-theme="colorburst"] .grid-2 > .card:nth-child(3) .ic { background: var(--vw-violet-soft); border-color: var(--vw-violet-border); }
html[data-vw-theme="colorburst"] .grid-2 > .card:nth-child(3) .ic .icon { color: var(--vw-violet); }
html[data-vw-theme="colorburst"] .grid-2 > .card:nth-child(4) .ic { background: var(--vw-teal-soft); border-color: var(--vw-teal-border); }
html[data-vw-theme="colorburst"] .grid-2 > .card:nth-child(4) .ic .icon { color: var(--vw-teal); }

/* ── pricing: featured plan glows warmer; check marks stay green ── */
html[data-vw-theme="colorburst"] .plan.featured {
  box-shadow: 0 0 0 1px var(--accent), 0 0 40px -12px color-mix(in srgb, var(--vw-coral) 45%, transparent), var(--shadow-lg);
}

/* ── final CTA: sunset band (amber → coral) with teal button accent ── */
html[data-vw-theme="colorburst"] .lp-cta {
  background: linear-gradient(120deg, #f6b53c 0%, #f0942a 45%, #ec7434 100%);
}
html[data-vw-theme="colorburst"] .lp-cta .lp-cta-btn { color: #ffc46a; }

/* ============================================================
   Tweak hooks — driven by data attributes set from the DC props
   ============================================================ */

/* CTA gradient style */
html[data-vw-theme="colorburst"][data-vw-cta="amber"] {
  --cta-grad: linear-gradient(135deg, #f4b53c 0%, #ec9a1e 100%);
  --accent-grad: linear-gradient(135deg, #f2b23a 0%, #e79318 100%);
  --cta-glow: 0 4px 20px -4px rgba(230, 150, 30, .5);
}
html[data-vw-theme="colorburst"][data-vw-cta="raspberry"] {
  --cta-grad: linear-gradient(135deg, #f6ab3a 0%, #ec6a3e 55%, #de4664 100%);
  --accent-grad: linear-gradient(135deg, #f4a338 0%, #e65648 100%);
  --cta-glow: 0 4px 22px -4px rgba(228, 88, 78, .45);
}
html[data-vw-theme="colorburst"][data-vw-cta="raspberry"] .lp-cta {
  background: linear-gradient(120deg, #f6ab3a 0%, #ec6a3e 50%, #de4664 100%);
}
html[data-vw-theme="colorburst"][data-vw-cta="amber"] .lp-cta {
  background: var(--cta-grad);
}

/* Watch register hue */
html[data-vw-theme="colorburst"][data-vw-watch="violet"] {
  --vw-teal: #7a5bc0; --vw-teal-dark: #6547a6; --vw-teal-soft: #f0eafb; --vw-teal-border: #dccff3;
  --watch-ink: #6d4fb2; --watch-ink-hover: #5d3f9e; --on-watch-ink: #f6f1ff;
}
html[data-theme="dark"][data-vw-theme="colorburst"][data-vw-watch="violet"] {
  --vw-teal: #b79bef; --vw-teal-dark: #c9b3f5; --vw-teal-soft: #201636; --vw-teal-border: #3a2a5e;
  --watch-ink: #8f6fd8; --watch-ink-hover: #a184e2; --on-watch-ink: #14092b;
}
html[data-vw-theme="colorburst"][data-vw-watch="blue"] {
  --vw-teal: #2f6fce; --vw-teal-dark: #2559ab; --vw-teal-soft: #e8f0fc; --vw-teal-border: #c9dcf6;
  --watch-ink: #2c67c2; --watch-ink-hover: #2456a8; --on-watch-ink: #eef5ff;
}
html[data-theme="dark"][data-vw-theme="colorburst"][data-vw-watch="blue"] {
  --vw-teal: #7fb0f2; --vw-teal-dark: #9cc2f6; --vw-teal-soft: #101d33; --vw-teal-border: #23406b;
  --watch-ink: #3f7fd8; --watch-ink-hover: #5590e2; --on-watch-ink: #06162e;
}
html[data-vw-theme="colorburst"][data-vw-watch] .step:nth-child(2) .num {
  background: linear-gradient(135deg, color-mix(in srgb, var(--vw-teal) 80%, #fff) 0%, var(--vw-teal) 100%);
  color: var(--on-watch-ink);
  box-shadow: 0 3px 10px -3px var(--vw-teal);
}

/* Hero highlighter-marker color */
html[data-vw-theme="colorburst"][data-vw-marker="coral"] .lp-hero h1 em::before {
  background: color-mix(in srgb, #f28a68 88%, transparent);
}
html[data-vw-theme="colorburst"][data-vw-marker="teal"] .lp-hero h1 em::before {
  background: color-mix(in srgb, #5ed3c5 82%, transparent);
}

/* Ambient color intensity (0–2, default 1) */
html[data-vw-theme="colorburst"] {
  --vw-int: 1;
  --aura-1: color-mix(in srgb, var(--accent-2) calc(var(--vw-int) * 14%), transparent);
  --aura-2: color-mix(in srgb, #0e8a80 calc(var(--vw-int) * 11%), transparent);
}
html[data-theme="dark"][data-vw-theme="colorburst"] {
  --aura-1: color-mix(in srgb, var(--accent-2) calc(var(--vw-int) * 18%), transparent);
  --aura-2: color-mix(in srgb, #34d3c3 calc(var(--vw-int) * 14%), transparent);
}

/* Alternating tinted section washes */
html[data-vw-theme="colorburst"][data-vw-washes="1"] #how {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-2) calc(var(--vw-int) * 6%), transparent) 30%, transparent);
}
html[data-vw-theme="colorburst"][data-vw-washes="1"] #watch.lp-sec {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--vw-teal) calc(var(--vw-int) * 6%), transparent) 30%, transparent);
}
html[data-vw-theme="colorburst"][data-vw-washes="1"] #api {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--vw-violet) calc(var(--vw-int) * 6%), transparent) 30%, transparent);
}
html[data-vw-theme="colorburst"][data-vw-washes="1"] #pricing {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--vw-coral) calc(var(--vw-int) * 5%), transparent) 30%, transparent);
}

/* Single-hue icons (turn the multi-hue rotation off) */
html[data-vw-theme="colorburst"][data-vw-mono="1"] .trust .icon,
html[data-vw-theme="colorburst"][data-vw-mono="1"] .lp-points .lp-point svg,
html[data-vw-theme="colorburst"][data-vw-mono="1"] .grid-2 > .card .ic .icon {
  color: var(--accent) !important;
}
html[data-vw-theme="colorburst"][data-vw-mono="1"] .lp-feature .fic,
html[data-vw-theme="colorburst"][data-vw-mono="1"] .grid-2 > .card .ic {
  background: var(--accent-soft) !important;
  border-color: var(--accent-soft-border) !important;
  color: var(--accent) !important;
}

/* ── logo: colorburst treatment — amber→coral play triangle, teal speech bubble ── */
html[data-vw-theme="colorburst"] .logo svg linearGradient[id^="vwPlay"] stop:first-child { stop-color: #f6b53c; }
html[data-vw-theme="colorburst"] .logo svg linearGradient[id^="vwPlay"] stop:last-child { stop-color: #ec7434; }
html[data-vw-theme="colorburst"] .logo svg path[stroke="#e6c179"] { fill: var(--vw-teal-soft); stroke: var(--vw-teal-border); }
html[data-vw-theme="colorburst"] .logo svg path[stroke="#c0800f"] { stroke: var(--vw-teal); }

/* ── demo panel: summary box + timestamps pick up the AI teal ── */
html[data-vw-theme="colorburst"] .lp-demo-sum { background: var(--vw-teal-soft); border-color: var(--vw-teal-border); }
html[data-vw-theme="colorburst"] .lp-demo-sum .lbl { color: var(--vw-teal-dark); }
html[data-vw-theme="colorburst"] .lp-demo-btn.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 10px -3px var(--vw-coral); }