html[data-landing-style-preset="modern"] body:not(.editor-mode),
body.editor-mode #editor-canvas[data-landing-style-preset="modern"] {
    --smile-bg: #f6f8ff;
    --smile-surface: #ffffff;
    --smile-soft: #e8edff;
    --smile-ink: #111827;
    --smile-muted: #637083;
    --smile-primary: #5b5cf6;
    --smile-primary-strong: #3f46d7;
    --smile-accent: #34c6f4;
    --smile-deep: #0e1326;
    --smile-line: rgba(17, 24, 39, 0.12);
    --smile-shadow: 0 24px 64px rgba(48, 54, 106, 0.14);
    --smile-button-shadow: 0 18px 44px rgba(91, 92, 246, 0.24);
    --smile-radius: 20px;
    --smile-button-radius: 999px;
    --smile-font-body: "Inter", system-ui, sans-serif;
    --smile-font-display: "Inter", system-ui, sans-serif;
}

html[data-landing-style-preset="premium"] body:not(.editor-mode),
body.editor-mode #editor-canvas[data-landing-style-preset="premium"] {
    --smile-bg: #f7f2e8;
    --smile-surface: #fffdf7;
    --smile-soft: #ebe1cf;
    --smile-ink: #252a29;
    --smile-muted: #6f6a61;
    --smile-primary: #8a7a55;
    --smile-primary-strong: #5b614f;
    --smile-accent: #c69a48;
    --smile-deep: #262d2b;
    --smile-line: rgba(37, 42, 41, 0.15);
    --smile-shadow: 0 30px 76px rgba(45, 39, 30, 0.15);
    --smile-button-shadow: 0 18px 44px rgba(138, 122, 85, 0.26);
    --smile-radius: 28px;
    --smile-button-radius: 999px;
    --smile-font-body: "Inter", system-ui, sans-serif;
    --smile-font-display: "Newsreader", Georgia, serif;
}

html[data-landing-style-preset="high-tech"] body:not(.editor-mode),
body.editor-mode #editor-canvas[data-landing-style-preset="high-tech"] {
    --smile-bg: #061319;
    --smile-surface: #0d2731;
    --smile-soft: #123743;
    --smile-ink: #e9fbff;
    --smile-muted: #9bb8c2;
    --smile-primary: #32d8e6;
    --smile-primary-strong: #62a6ff;
    --smile-accent: #74f2bd;
    --smile-deep: #030a0e;
    --smile-line: rgba(50, 216, 230, 0.22);
    --smile-shadow: 0 32px 80px rgba(0, 0, 0, 0.38);
    --smile-button-shadow: 0 18px 48px rgba(50, 216, 230, 0.24);
    --smile-radius: 16px;
    --smile-button-radius: 14px;
    --smile-font-body: "Inter", system-ui, sans-serif;
    --smile-font-display: "Inter", system-ui, sans-serif;
}

html[data-landing-style-preset="minimal"] body:not(.editor-mode),
body.editor-mode #editor-canvas[data-landing-style-preset="minimal"] {
    --smile-bg: #fbfbfa;
    --smile-surface: #ffffff;
    --smile-soft: #f0f0ee;
    --smile-ink: #1b1d1d;
    --smile-muted: #686d6d;
    --smile-primary: #303534;
    --smile-primary-strong: #111313;
    --smile-accent: #bfc5c3;
    --smile-deep: #181a1a;
    --smile-line: rgba(27, 29, 29, 0.12);
    --smile-shadow: 0 18px 44px rgba(20, 22, 22, 0.08);
    --smile-button-shadow: 0 14px 34px rgba(20, 22, 22, 0.14);
    --smile-radius: 10px;
    --smile-button-radius: 10px;
    --smile-font-body: "Inter", system-ui, sans-serif;
    --smile-font-display: "Inter", system-ui, sans-serif;
}

html[data-landing-style-preset="warm"] body:not(.editor-mode),
body.editor-mode #editor-canvas[data-landing-style-preset="warm"] {
    --smile-bg: #fff4ea;
    --smile-surface: #fffdf9;
    --smile-soft: #f7dfcf;
    --smile-ink: #422b24;
    --smile-muted: #82695f;
    --smile-primary: #c86f4a;
    --smile-primary-strong: #9b4f39;
    --smile-accent: #d69d43;
    --smile-deep: #3b2119;
    --smile-line: rgba(66, 43, 36, 0.14);
    --smile-shadow: 0 26px 66px rgba(121, 70, 48, 0.14);
    --smile-button-shadow: 0 18px 44px rgba(200, 111, 74, 0.24);
    --smile-radius: 28px;
    --smile-button-radius: 999px;
    --smile-font-body: "Inter", system-ui, sans-serif;
    --smile-font-display: "Newsreader", Georgia, serif;
}

html[data-landing-style-preset="romantic"] body:not(.editor-mode),
body.editor-mode #editor-canvas[data-landing-style-preset="romantic"] {
    --smile-bg: #fff2f7;
    --smile-surface: #fffdfd;
    --smile-soft: #f8dfe8;
    --smile-ink: #432637;
    --smile-muted: #876b79;
    --smile-primary: #de789c;
    --smile-primary-strong: #b8557f;
    --smile-accent: #e3a56e;
    --smile-deep: #3c1d2c;
    --smile-line: rgba(67, 38, 55, 0.13);
    --smile-shadow: 0 26px 66px rgba(128, 75, 97, 0.14);
    --smile-button-shadow: 0 18px 44px rgba(222, 120, 156, 0.26);
    --smile-radius: 30px;
    --smile-button-radius: 999px;
    --smile-font-body: "Inter", system-ui, sans-serif;
    --smile-font-display: "Newsreader", Georgia, serif;
}

html[data-landing-style-preset="brutalism"] body:not(.editor-mode),
body.editor-mode #editor-canvas[data-landing-style-preset="brutalism"] {
    --smile-bg: #f5f0dc;
    --smile-surface: #fff8c9;
    --smile-soft: #fff05a;
    --smile-ink: #111111;
    --smile-muted: #4d4a3e;
    --smile-primary: #ff5a00;
    --smile-primary-strong: #111111;
    --smile-accent: #36d8f0;
    --smile-deep: #111111;
    --smile-line: rgba(17, 17, 17, 0.34);
    --smile-shadow: 10px 10px 0 rgba(17, 17, 17, 0.22);
    --smile-button-shadow: 6px 6px 0 rgba(17, 17, 17, 0.25);
    --smile-radius: 0px;
    --smile-button-radius: 0px;
    --smile-font-body: "Inter", Arial, sans-serif;
    --smile-font-display: "Inter", Arial, sans-serif;
}

html[data-landing-style-preset] body:not(.editor-mode) .smile-page,
body.editor-mode #editor-canvas[data-landing-style-preset] .smile-page {
    background:
        radial-gradient(circle at 14% 4%, color-mix(in srgb, var(--smile-primary) 18%, transparent) 0, transparent 31%),
        linear-gradient(180deg, var(--smile-bg) 0%, color-mix(in srgb, var(--smile-soft) 42%, var(--smile-bg)) 100%);
    color: var(--smile-ink);
    font-family: var(--smile-font-body);
}

html[data-landing-style-preset] body:not(.editor-mode) :where(.smile-title, .smile-section-title, .smile-brand__mark, .smile-metric__value, .smile-testimonial__quote),
body.editor-mode #editor-canvas[data-landing-style-preset] :where(.smile-title, .smile-section-title, .smile-brand__mark, .smile-metric__value, .smile-testimonial__quote) {
    font-family: var(--smile-font-display);
}

html[data-landing-style-preset] body:not(.editor-mode) .smile-header,
body.editor-mode #editor-canvas[data-landing-style-preset] .smile-header {
    background: color-mix(in srgb, var(--smile-surface) 86%, transparent) !important;
    border-bottom-color: var(--smile-line);
}

html[data-landing-style-preset] body:not(.editor-mode) :where(.smile-form-panel, .smile-faq, .smile-testimonial, .smile-plan-stack, .smile-timeline__item, .smile-hero__metrics),
body.editor-mode #editor-canvas[data-landing-style-preset] :where(.smile-form-panel, .smile-faq, .smile-testimonial, .smile-plan-stack, .smile-timeline__item, .smile-hero__metrics) {
    border-color: var(--smile-line);
    border-radius: var(--smile-radius);
    box-shadow: var(--smile-shadow);
}

html[data-landing-style-preset] body:not(.editor-mode) .smile-button--primary,
body.editor-mode #editor-canvas[data-landing-style-preset] .smile-button--primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--smile-primary-strong), var(--smile-primary)) !important;
    box-shadow: var(--smile-button-shadow) !important;
    border-radius: var(--smile-button-radius) !important;
}

html[data-landing-style-preset] body:not(.editor-mode) .smile-button--text,
body.editor-mode #editor-canvas[data-landing-style-preset] .smile-button--text {
    color: var(--smile-ink) !important;
    background: color-mix(in srgb, var(--smile-surface) 72%, transparent) !important;
    border-color: var(--smile-line) !important;
    border-radius: var(--smile-button-radius) !important;
}

html[data-landing-style-preset="high-tech"] body:not(.editor-mode) .smile-page,
body.editor-mode #editor-canvas[data-landing-style-preset="high-tech"] .smile-page {
    background:
        radial-gradient(circle at 72% 0%, rgba(50, 216, 230, 0.2), transparent 30%),
        linear-gradient(135deg, #061319 0%, #0d2731 56%, #030a0e 100%) !important;
}

html[data-landing-style-preset="high-tech"] body:not(.editor-mode) :where(.smile-pathways, .smile-tech, .smile-stories),
body.editor-mode #editor-canvas[data-landing-style-preset="high-tech"] :where(.smile-pathways, .smile-tech, .smile-stories) {
    background: #071a21 !important;
}

html[data-landing-style-preset="high-tech"] body:not(.editor-mode) :where(.smile-title, .smile-section-title, .smile-brand__name, .smile-pathway__title, .smile-plan__title, .smile-timeline__title),
body.editor-mode #editor-canvas[data-landing-style-preset="high-tech"] :where(.smile-title, .smile-section-title, .smile-brand__name, .smile-pathway__title, .smile-plan__title, .smile-timeline__title) {
    color: var(--smile-ink) !important;
}

html[data-landing-style-preset="brutalism"] body:not(.editor-mode) :where(.smile-button, .smile-pathway, .smile-form-panel, .smile-faq, .smile-testimonial, .smile-plan-stack, .smile-timeline__item, .smile-hero__metrics),
body.editor-mode #editor-canvas[data-landing-style-preset="brutalism"] :where(.smile-button, .smile-pathway, .smile-form-panel, .smile-faq, .smile-testimonial, .smile-plan-stack, .smile-timeline__item, .smile-hero__metrics) {
    border-width: 2px !important;
}