:root{
    --brand-green: #2D5C61;
    --brand-violet: #573160;
    --brand-blue: #2F5876;
    --color-total:  #65C5AA;
    --bg-cream: #fffce5;
    --bg-teal-soft: #b0d9d3;
    --color-page: #15181e;
    --color-text: #FFFFFF;
    --color-title: #65C5AA;
    --color-ink: #101820;
    --color-black: #000000;
    --color-text-dark: #222222;
    --color-text-muted: #666666;
    --color-text-secondary: #6E7082;
    --color-error: #ff8f85;
    --color-error-text: #ffaaa0;
    --color-cookie: #854385;
    --color-border-light: #ededed;
    --color-surface: #ffffff;
    --color-surface-soft: #f5f7f7;
    --color-surface-muted: #eef3f2;
    --color-menu-legacy: #bc262c;
    --color-menu-legacy-active: #fc8d3d;
    --color-menu-legacy-surface: #f5f5f5;
    --color-brand-yellow: #ffe600;
    --color-selection-background: #3F8C82;
    --color-selection: #F4FFFC;
    --color-white-92: rgba(255, 255, 255, 0.92);
    --color-white-88: rgba(255, 255, 255, 0.88);
    --color-white-82: rgba(255, 255, 255, 0.82);
    --color-white-80: rgba(255, 255, 255, 0.8);
    --color-white-75: rgba(255, 255, 255, 0.75);
    --color-white-72: rgba(255, 255, 255, 0.72);
    --color-white-70: rgba(255, 255, 255, 0.7);
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-45: rgba(255, 255, 255, 0.45);
    --color-white-42: rgba(255, 255, 255, 0.42);
    --color-white-25: rgba(255, 255, 255, 0.25);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-18: rgba(255, 255, 255, 0.18);
    --color-white-17: rgba(255, 255, 255, 0.17);
    --color-white-15: rgba(255, 255, 255, 0.15);
    --color-white-14: rgba(255, 255, 255, 0.14);
    --color-white-13: rgba(255, 255, 255, 0.13);
    --color-white-12: rgba(255, 255, 255, 0.12);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-09: rgba(255, 255, 255, 0.09);
    --color-white-08: rgba(255, 255, 255, 0.08);
    --color-white-07: rgba(255, 255, 255, 0.07);
    --color-white-055: rgba(255, 255, 255, 0.055);
    --color-white-045: rgba(255, 255, 255, 0.045);
    --color-white-04: rgba(255, 255, 255, 0.04);

    --color-brand-green-36: rgba(45, 92, 97, 0.36);
    --color-brand-green-30: rgba(45, 92, 97, 0.3);
    --color-brand-green-20: rgba(45, 92, 97, 0.2);
    --color-brand-green-18: rgba(45, 92, 97, 0.18);
    --color-brand-green-12: rgba(45, 92, 97, 0.12);
    --color-brand-green-08: rgba(45, 92, 97, 0.08);
    --color-accent-50: rgba(101, 197, 170, 0.5);
    --color-accent-35: rgba(101, 197, 170, 0.35);
    --color-accent-22: rgba(101, 197, 170, 0.22);
    --color-accent-18: rgba(101, 197, 170, 0.18);

    --color-shadow: rgba(0, 0, 0, 0.22);
    --color-shadow-strong: rgba(0, 0, 0, 0.3);
    --color-shadow-soft: rgba(0, 0, 0, 0.12);
    --color-shadow-light: rgba(0, 0, 0, 0.08);
    --color-shadow-page: rgba(5, 10, 18, 0.1);
    --color-ink-20: rgba(17, 24, 32, 0.2);
    --color-ink-85: rgba(17, 24, 32, 0.85);
    --liquid-border: 0.0625rem solid var(--color-white-20);
    --liquid-background: var(--color-white-08);
    --liquid-shadow: inset 0 0.0625rem 0 var(--color-white-18), 0 0.75rem 2rem var(--color-shadow-page);
    --liquid-blur: blur(1.15rem) saturate(115%);
    --fz-hero-title: clamp(2.6rem, 4.2vw, 4.4rem);
    --fz-section-title: clamp(2rem, 3vw, 3.25rem);
    --fz-card-title: clamp(1.2rem, 1.35vw, 1.5rem);
    --fz-lead: clamp(1.05rem, 1.15vw, 1.35rem);
    --fz-text: clamp(0.98rem, 0.95vw, 1.05rem);
    --fz-small: clamp(0.9rem, 0.85vw, 0.98rem);
    --fz-number: clamp(2rem, 3.2vw, 3.5rem);
    --fz-btn: clamp(0.95rem, 0.95vw, 1rem);

    --lh-tight: 1.06;
    --lh-title: 1.18;
    --lh-lead: 1.6;
    --lh-text: 1.75;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-heavy: 800;

    --f-manr: 'Manrope', system-ui, sans-serif;

    --s10: 0.625rem;
    --s11: 0.6875rem;
    --s12: 0.75rem;
    --s13: 0.8125rem;
    --s14: 0.875rem;
    --s15: 0.9375rem;
    --s16: 1rem;
    --s17: 1.0625rem;
    --s18: 1.125rem;
    --s19: 1.1875rem;
    --s20: 1.25rem;
    --s21: 1.3125rem;
    --s22: 1.375rem;
    --s23: 1.4375rem;
    --s24: 1.5rem;
    --s28: 1.75rem;
    --s32: 2rem;
    --s36: 2.25rem;
    --s40: 2.5rem;
    --s44: 2.75rem;
    --s48: 3rem;

    --page-gutter: clamp(1rem, 5vw, 4.375rem);
    --page-max-width: min(69.375em, calc(100vw - 2 * var(--page-gutter)));
}

/*
 * Светлая тема. Для переключения достаточно установить:
 * <html data-theme="white">
 */
:root[data-theme="white"] {
    --brand-green: #2D5C61;
    --brand-violet: #555DA2;
    --brand-blue: #989FDB;
    --color-total: #54B5A7;

    --bg-cream: #FFFCF2;
    --bg-teal-soft: #EAECFA;
    --color-page: #FFFFFF;
    --color-text: #20243A;
    --color-title: #555DA2;
    --color-ink: #20243A;
    --color-black: #10131F;
    --color-text-dark: #20243A;
    --color-text-muted: #656A80;
    --color-text-secondary: #737991;

    --color-error: #D95C68;
    --color-error-text: #A83F4A;
    --color-cookie: #555DA2;
    --color-border-light: #DDE0F2;
    --color-surface: #FFFFFF;
    --color-surface-soft: #F3F4FC;
    --color-surface-muted: #EAECFA;
    --color-menu-legacy: #555DA2;
    --color-menu-legacy-active: #54B5A7;
    --color-menu-legacy-surface: #F3F4FC;
    --color-brand-yellow: #F5D84F;

    --color-white-92: rgba(32, 36, 58, 0.92);
    --color-white-88: rgba(32, 36, 58, 0.88);
    --color-white-82: rgba(32, 36, 58, 0.82);
    --color-white-80: rgba(32, 36, 58, 0.8);
    --color-white-75: rgba(32, 36, 58, 0.75);
    --color-white-72: rgba(32, 36, 58, 0.72);
    --color-white-70: rgba(32, 36, 58, 0.7);
    --color-white-50: rgba(32, 36, 58, 0.5);
    --color-white-45: rgba(32, 36, 58, 0.45);
    --color-white-42: rgba(32, 36, 58, 0.42);
    --color-white-25: rgba(85, 93, 162, 0.25);
    --color-white-20: rgba(85, 93, 162, 0.2);
    --color-white-18: rgba(85, 93, 162, 0.18);
    --color-white-17: rgba(85, 93, 162, 0.17);
    --color-white-15: rgba(85, 93, 162, 0.15);
    --color-white-14: rgba(85, 93, 162, 0.14);
    --color-white-13: rgba(85, 93, 162, 0.13);
    --color-white-12: rgba(85, 93, 162, 0.12);
    --color-white-10: rgba(85, 93, 162, 0.1);
    --color-white-09: rgba(85, 93, 162, 0.09);
    --color-white-08: rgba(85, 93, 162, 0.08);
    --color-white-07: rgba(85, 93, 162, 0.07);
    --color-white-055: rgba(85, 93, 162, 0.055);
    --color-white-045: rgba(85, 93, 162, 0.045);
    --color-white-04: rgba(85, 93, 162, 0.04);

    --color-brand-green-36: rgba(84, 181, 167, 0.36);
    --color-brand-green-30: rgba(84, 181, 167, 0.3);
    --color-brand-green-20: rgba(84, 181, 167, 0.2);
    --color-brand-green-18: rgba(84, 181, 167, 0.18);
    --color-brand-green-12: rgba(84, 181, 167, 0.12);
    --color-brand-green-08: rgba(84, 181, 167, 0.08);
    --color-accent-50: rgba(152, 159, 219, 0.5);
    --color-accent-35: rgba(152, 159, 219, 0.35);
    --color-accent-22: rgba(152, 159, 219, 0.22);
    --color-accent-18: rgba(152, 159, 219, 0.18);

    --color-shadow: rgba(85, 93, 162, 0.18);
    --color-shadow-strong: rgba(85, 93, 162, 0.24);
    --color-shadow-soft: rgba(85, 93, 162, 0.12);
    --color-shadow-light: rgba(85, 93, 162, 0.08);
    --color-shadow-page: rgba(85, 93, 162, 0.1);
    --color-ink-20: rgba(32, 36, 58, 0.2);
    --color-ink-85: rgba(32, 36, 58, 0.85);

    --color-lavender: #EAECFA;
    --color-lavender-accent: #989FDB;
    --color-mint: #54B5A7;
    --color-rose-soft: #FEE8E8;

    /* Контрастные роли для тёмного футера внутри светлой темы. */
    --color-footer-text: #FFFFFF;
    --color-footer-muted: rgba(255, 255, 255, 0.78);
    --color-footer-line: rgba(255, 255, 255, 0.34);
    --color-footer-card: rgba(255, 255, 255, 0.72);
    --color-footer-card-text: #20243A;

    --liquid-border: 0.0625rem solid rgba(85, 93, 162, 0.22);
    --liquid-background: rgba(255, 255, 255, 0.22);
    --liquid-shadow:
            inset 0 0.0625rem 0 rgba(255, 255, 255, 0.58),
            0 0.75rem 2rem rgba(85, 93, 162, 0.1);
    --liquid-blur: blur(1.15rem) saturate(115%);
}

:root[data-theme="white"] body {
    background: var(--color-page);
}

:root[data-theme="white"] .liquid {
    border-color: var(--color-white-18);
    background: var(--liquid-background) !important;
    box-shadow: var(--liquid-shadow);
}

:root[data-theme="white"] .service-detail__button,
:root[data-theme="white"] .service-request button[type="submit"] {
    color: var(--color-surface) !important;
}

:root[data-theme="white"] .service-detail__sale {
    color: var(--color-surface);
}

:root[data-theme="white"] .service-detail__additional-card:nth-child(3n + 1),
:root[data-theme="white"] .service-detail__additional-card:nth-child(3n + 2),
:root[data-theme="white"] .service-detail__additional-card:nth-child(3n),
:root[data-theme="white"] .service-detail__tags .liquid {
    background: var(--liquid-background) !important;
}

/* В светлой теме цветные шары остаются акцентом, а не перекрывают контент. */
:root[data-theme="white"] .page-background__ball {
    opacity: 0.38;
    filter: blur(190px) saturate(85%);
}

/* Футер остаётся фирменным фиолетовым, поэтому ему нужна своя светлая типографика. */
:root[data-theme="white"] .footer {
    color: var(--color-footer-text);
}

:root[data-theme="white"] .footer a,
:root[data-theme="white"] .footer p,
:root[data-theme="white"] .footer li,
:root[data-theme="white"] .footer span {
    color: inherit;
}

:root[data-theme="white"] .footer_info_contact_wrap {
    border-color: var(--color-footer-line);
}

:root[data-theme="white"] .footer .information.liquid,
:root[data-theme="white"] .footer .footer_helper.liquid {
    color: var(--color-footer-card-text);
    border-color: var(--color-footer-line);
    background: var(--color-footer-card) !important;
}

:root[data-theme="white"] .footer .information > p > span {
    color: var(--brand-green);
}

:root[data-theme="white"] .footer_end {
    color: var(--color-footer-muted);
}

body {
    max-width: 100vw;
    overflow-x: hidden;
}
html {
    font-size: 16px;
}

@media (max-width: 950px) {
    html { font-size: 16px; }
}
@media (min-width: 951px) {
    html {
        font-size: clamp(14px, calc(14px + 0.35vw), 40px);
    }
}
.liquid {
    --border: var(--liquid-border);
    --background: var(--liquid-background);
    --blur: var(--liquid-blur);
    --radiusSmall: .65rem;
    --radiusRegular: 1rem;
}