html {
    color-scheme: light;

    --kw-page: #FFFFFF;
    --kw-page-gradient: linear-gradient(180deg, #F7FBFF 0%, #FFFFFF 46%, #F8FBFF 100%);
    --kw-shape-a: rgba(122, 174, 222, 0.10);
    --kw-shape-b: rgba(62, 162, 255, 0.07);
    --kw-shape-c: rgba(13, 52, 88, 0.04);

    --kw-surface: #EEF4FA;
    --kw-surface-strong: #E2ECF5;
    --kw-surface-hover: #D8E6F1;
    --kw-input: #FFFFFF;

    --kw-text: #0A2540;
    --kw-text-muted: #50627A;
    --kw-text-soft: #6B7B8F;
    --kw-primary: #1C7ED6;
    --kw-primary-hover: #0A2540;
    --kw-on-primary: #FFFFFF;
    --kw-divider: rgba(10, 37, 64, 0.12);
    --kw-danger: #C0362C;
    --kw-success: #4BB71B;

    --color-primary: var(--kw-text);
    --color-secondary: var(--kw-text-muted);
    --color-background: var(--kw-page);
    --color-primary-soft: var(--kw-surface-strong);
    --color-surface-soft: var(--kw-surface);
    --nav-primary: var(--kw-text);
    --nav-muted: var(--kw-text-muted);
    --nav-accent: var(--kw-primary);
    --lt-primary: var(--kw-text);
    --lt-accent: var(--kw-primary);
    --lt-soft: var(--kw-surface-strong);
    --lt-text: var(--kw-text-muted);
    --lt-border: transparent;
    --lt-shadow: none;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --kw-page: #071725;
    --kw-page-gradient: linear-gradient(180deg, #071725 0%, #091F33 42%, #071725 100%);
    --kw-shape-a: rgba(120, 191, 255, 0.10);
    --kw-shape-b: rgba(62, 162, 255, 0.08);
    --kw-shape-c: rgba(234, 244, 255, 0.05);

    --kw-surface: #10263D;
    --kw-surface-strong: #183451;
    --kw-surface-hover: #213F5E;
    --kw-input: #0B1E31;

    --kw-text: #F3F8FF;
    --kw-text-muted: #C2D0E0;
    --kw-text-soft: #91A4BA;
    --kw-primary: #2F8FEA;
    --kw-primary-hover: #78BFFF;
    --kw-on-primary: #FFFFFF;
    --kw-divider: rgba(234, 244, 255, 0.14);
}

html.theme-transition,
html.theme-transition *,
html.theme-previewing,
html.theme-previewing * {
    transition:
        background-color 0.35s ease,
        background 0.35s ease,
        color 0.35s ease,
        fill 0.35s ease,
        stroke 0.35s ease;
}

body,
.subpage {
    background: var(--kw-page);
    color: var(--kw-text);
}

#content,
.letstalk-page {
    background: var(--kw-page-gradient);
}

#content::before,
.letstalk-page::before {
    background:
        radial-gradient(circle 9rem at 14% 17%, var(--kw-shape-a) 0, var(--kw-shape-a) 99%, transparent 100%),
        radial-gradient(circle 11rem at 84% 34%, var(--kw-shape-b) 0, var(--kw-shape-b) 99%, transparent 100%),
        radial-gradient(circle 10rem at 18% 66%, var(--kw-shape-c) 0, var(--kw-shape-c) 99%, transparent 100%),
        radial-gradient(circle 8rem at 76% 88%, var(--kw-shape-a) 0, var(--kw-shape-a) 99%, transparent 100%);
}

.services-section,
.showcase-section,
.reviews-section,
.process-section {
    background: transparent;
}

.navbar,
.mobile-menu,
.header-label,
.services-label,
.showcase-label,
.reviews-label,
.process-label,
.service-card,
.showcase-card,
.review-card,
.process-card,
.contact-form,
.form-summary div,
.calculator-prompt,
.success-modal-content {
    background: var(--kw-surface);
    border-color: transparent;
    box-shadow: none;
}

.form-group input,
.form-group textarea,
.progress-step,
.btn-secondary,
.secondary-button,
.process-card-link,
.process-card-features,
.process-card-guarantee,
.feature-tag,
.showcase-badge,
.mobile-nav-links a,
.action-card {
    background: var(--kw-surface-strong);
    border-color: transparent;
    box-shadow: none;
}

.form-group input,
.form-group textarea {
    background: var(--kw-input);
    color: var(--kw-text);
}

.theme-toggle:hover,
.btn-secondary:hover,
.secondary-button:hover,
.mobile-nav-links a:hover,
.action-card:hover,
.service-card:hover,
.showcase-card:hover,
.review-card:hover,
.process-card:hover {
    background: var(--kw-surface-hover);
    box-shadow: none;
}

.primary-button,
.btn-primary {
    background: var(--kw-primary);
    color: var(--kw-on-primary);
    border-color: transparent;
    box-shadow: none;
}

.primary-button:hover,
.btn-primary:hover {
    background: var(--kw-primary-hover);
    color: var(--kw-on-primary);
    box-shadow: none;
}

.service-card-icon,
.process-card::before,
.process-card-icon {
    background: var(--kw-text);
    color: var(--kw-page);
    box-shadow: none;
}

.service-card-icon .material-icons,
.process-card-icon .material-icons,
.process-card::before {
    color: var(--kw-page);
}

.header-stats,
.service-card-meta,
.review-footer {
    border-color: var(--kw-divider);
}

.progress-line {
    background: var(--kw-divider);
}

.progress-line-fill {
    background: var(--kw-primary);
}

.progress-step.active,
.progress-step.completed {
    background: var(--kw-text);
    color: var(--kw-page);
}

.stat-number {
    background: none;
    background-clip: initial;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: currentColor;
}

.header-text .highlight {
    color: var(--kw-primary);
    -webkit-text-fill-color: var(--kw-primary);
}

.navbar-logo path[fill="#224141"] {
    fill: var(--kw-text);
}