/* funnelzi design tokens. Three presets: light (default, inherits the theme), dark, soft.
   Per funnel the owner can change the accent color; everything else follows these variables. */
:root {
	--fz-accent: #6b4dff;
	--fz-accent-ink: #fff;
	--fz-accent-soft: color-mix(in srgb, var(--fz-accent) 12%, transparent);
	--fz-surface: #fff;
	--fz-text: #1a1a2e;
	--fz-muted: #64748b;
	--fz-border: #e2e8f0;
	--fz-success: #10b981;
	--fz-danger: #b3261e;
	--fz-radius: 14px;
	--fz-field-radius: 10px;
	--fz-gap: 18px;
}

.funnelzi-preset-dark,
body.funnelzi-preset-dark {
	--fz-surface: #12121a;
	--fz-text: #f4f4f8;
	--fz-muted: #a3a8bd;
	--fz-border: rgba(255, 255, 255, .1);
	--fz-danger: #ff8a80;
}

.funnelzi-preset-soft,
body.funnelzi-preset-soft {
	--fz-surface: #f6f4ff;
	--fz-border: #e4dfff;
}

/* Canvas: the clean page funnel steps are shown in (no theme header, title or footer). */
body.funnelzi-canvas { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.55; background: #fff; color: #1a1a2e; }
body.funnelzi-canvas.funnelzi-preset-dark { background: #0a0a0f; color: #f4f4f8; }
body.funnelzi-canvas.funnelzi-preset-soft { background: #fbfaff; }
body.funnelzi-canvas .fz-canvas { max-width: none; margin: 0; padding: 0; }
body.funnelzi-canvas .funnelzi-page { padding: 0; background: none; border-radius: 0; }
body.funnelzi-canvas h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; }
body.funnelzi-canvas a:not(.funnelzi-btn) { color: color-mix(in srgb, var(--fz-accent) 75%, var(--fz-text)); }

/* The page wrapper only paints a background for dark/soft, so light funnels blend into any theme. */
.funnelzi-page { --fz-accent: var(--fz-user-accent, #6b4dff); color: var(--fz-text); }
.funnelzi-preset-dark.funnelzi-page { background: #0a0a0f; padding: 2.5rem 1rem; border-radius: var(--fz-radius); }
.funnelzi-preset-soft.funnelzi-page { background: #fbfaff; padding: 2.5rem 1rem; border-radius: var(--fz-radius); }
.funnelzi-page h1,
.funnelzi-page h2,
.funnelzi-page h3 { color: inherit; }
.funnelzi-page .wp-block-heading,
.funnelzi-page p { text-wrap: balance; }