:root {
    --public-bg: #ffffff;
    --public-surface: #ffffff;
    --public-surface-raised: #ffffff;
    --public-surface-soft: #f7f7f9;
    --public-surface-muted: #f1f1f4;
    --public-text: #18181b;
    --public-text-strong: #09090b;
    --public-text-muted: #52525b;
    --public-text-subtle: #71717a;
    --public-border: #e4e4e7;
    --public-border-strong: #d4d4d8;
    --public-primary: #583595;
    --public-primary-hover: #472a78;
    --public-primary-soft: rgba(88, 53, 149, 0.09);
    --public-primary-border: rgba(88, 53, 149, 0.2);
    --public-shadow: rgba(24, 24, 27, 0.08);
    --public-nav: rgba(255, 255, 255, 0.94);
    color-scheme: light;
}

html.dark {
    --public-bg: #09090f;
    --public-surface: #12121a;
    --public-surface-raised: #191923;
    --public-surface-soft: #15151e;
    --public-surface-muted: #20202b;
    --public-text: #f4f4f5;
    --public-text-strong: #ffffff;
    --public-text-muted: #d4d4d8;
    --public-text-subtle: #a1a1aa;
    --public-border: #30303d;
    --public-border-strong: #454554;
    --public-primary: #c4b5fd;
    --public-primary-hover: #ddd6fe;
    --public-primary-soft: rgba(167, 139, 250, 0.14);
    --public-primary-border: rgba(196, 181, 253, 0.28);
    --public-shadow: rgba(0, 0, 0, 0.38);
    --public-nav: rgba(18, 18, 26, 0.94);
    color-scheme: dark;
}

html,
body,
body::before,
body::after {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

html.dark body {
    background: var(--public-bg) !important;
    color: var(--public-text) !important;
}

html.dark :is(
    .developer-section,
    .designer-section,
    .drummer-section,
    .about-section,
    .contact-section,
    .legal-section,
    .designer-post-main,
    .process-section,
    .projects-section,
    .services-section,
    .latest-section,
    .featured-projects-section,
    .drummer-stage-section,
    .designer-section,
    .updates-section
) {
    background-color: var(--public-bg) !important;
}

html.dark :is(
    .skills-section,
    .about-skills-section,
    .work-section,
    .experience-section,
    .details-card,
    .bg-accent,
    .rhythm-cta,
    .contact-section,
    .services-section,
    .tech-section
) {
    background: var(--public-surface-soft) !important;
}

html.dark :is(
    .hero-name,
    .hero-name .first-name,
    .name-title .first-name,
    .hero-title,
    .page-title,
    .section-title,
    .category-title-group h1,
    .about-content h2,
    .service-content h2,
    .contact-info h3,
    .legal-content h2,
    .legal-content h3,
    .showcase-title,
    .process-heading,
    .detail-value,
    .standard-card .card-title,
    .skill-category h3,
    .stat-card h3,
    .card h2,
    .wrap h1,
    .project-title,
    .project-nav-title,
    .service-title,
    .skill-title,
    .rhythm-cta .cta-title,
    .designer-section .category-title-group h3
) {
    color: var(--public-text-strong) !important;
}

html.dark :is(
    .hero-description,
    .hero-subtitle,
    .page-subtitle,
    .section-subtitle,
    .category-title-group p,
    .about-content p,
    .service-content p,
    .service-content li,
    .contact-info p,
    .legal-content p,
    .legal-content li,
    .showcase-description,
    .stage-text,
    .standard-card .card-desc,
    .skill-category p,
    .stat-label,
    .lead,
    .card p,
    .card li,
    .project-description,
    .project-body p,
    .project-body li,
    .service-description,
    .service-features li,
    .skill-desc,
    .tech-item span,
    .rhythm-cta .cta-copy,
    .designer-section .category-title-group p,
    .about-highlight-text
) {
    color: var(--public-text-muted) !important;
}

html.dark :is(
    .last-updated,
    .detail-label,
    .standard-card .card-meta,
    .meta-label,
    .meta-value,
    .project-meta,
    .empty-state p
) {
    color: var(--public-text-subtle) !important;
}

html.dark :is(
    .stat-card,
    .skill-category,
    .standard-card,
    .standard-card .card-content,
    .contact-form,
    .service-visual,
    .project-showcase,
    .showcase-content,
    .stage-image-wrap,
    .card,
    .project-card,
    .feature-card,
    .info-card,
    .content-card,
    .service-card,
    .skill-card,
    .tech-item,
    .process-timeline-content,
    .process-principle-card,
    .supporting-card,
    .element-content
) {
    background: var(--public-surface-raised) !important;
    border-color: var(--public-border) !important;
    box-shadow: 0 20px 50px var(--public-shadow) !important;
}

html.dark .standard-card .card-media {
    background: var(--public-surface-muted) !important;
}

html.dark .standard-card .card-content {
    box-shadow: none !important;
}

html.dark :is(.section-label, .eyebrow, .skill-tag, .tag-pill, .standard-card .card-tag) {
    background: var(--public-primary-soft) !important;
    border-color: var(--public-primary-border) !important;
    color: var(--public-primary) !important;
}

html.dark :is(.section-label, .hero-label, .showcase-label, .stage-label, .stat-number, .about-content strong) {
    color: var(--public-primary) !important;
}

html.dark :is(.hero-tagline, .gradient-text, .tech-category-title, .service-features li::before) {
    color: var(--public-primary) !important;
}

html.dark :is(.about-highlight-title, .included-title, .social-link) {
    color: var(--public-primary) !important;
    border-color: var(--public-primary-border) !important;
}

html.dark :is(.hero-name .last-name, .name-title .last-name) {
    background: linear-gradient(135deg, #ddd6fe 0%, #a78bfa 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html.dark .bg-text-content {
    color: rgba(196, 181, 253, 0.035) !important;
}

html.dark .nav-logo-img {
    filter: brightness(0) invert(1);
}

/* Logo artwork is authored for a white presentation canvas. */
html.dark :is(
    .designer-card .card-media,
    .designer-section .standard-card .card-media,
    .updates-section .update-type-design .card-media,
    .showcase-visual.light-canvas
) {
    background: #ffffff !important;
    color-scheme: only light;
}

html.dark :is(.form-group input, .form-group textarea, .form-group select) {
    background: var(--public-surface-soft) !important;
    border-color: var(--public-border-strong) !important;
    color: var(--public-text) !important;
}

html.dark :is(.form-group input, .form-group textarea)::placeholder {
    color: var(--public-text-subtle) !important;
}

html.dark .form-group label {
    color: var(--public-text) !important;
}

html.dark :is(.btn-secondary, .secondary-btn, .project-nav-link) {
    background: var(--public-surface-raised) !important;
    border-color: var(--public-border-strong) !important;
    color: var(--public-text) !important;
}

html.dark :is(.legal-content a, .showcase-link) {
    color: var(--public-primary) !important;
}

html.dark .designer-back-link {
    color: var(--public-primary) !important;
}

html.dark .designer-back-link:hover {
    color: #ffffff !important;
}

.designer-back-link:focus-visible {
    border-radius: 6px;
    outline: 3px solid var(--public-primary-border);
    outline-offset: 4px;
}

/* Project case studies ---------------------------------------------------- */
html.dark :is(
    .overview-content p,
    .challenge-content p,
    .solution-content p,
    .feature-description,
    .stage-explanation
) {
    color: var(--public-text-muted) !important;
}

html.dark :is(.feature-title, .process-timeline-title, .process-principle-title, .supporting-card h3) {
    color: var(--public-text-strong) !important;
}

html.dark :is(.feature-card, .tech-item) {
    background: var(--public-surface-raised) !important;
    border-color: var(--public-border) !important;
}

html.dark .tech-item i {
    color: var(--public-primary) !important;
}

html.dark :is(.tech-slider-container, .stage-image-container) {
    background: var(--public-surface-raised) !important;
    border: 1px solid var(--public-border) !important;
}

html.dark .stage-image-container {
    color-scheme: only light;
}

html.dark .nav-project {
    background: var(--public-primary-soft) !important;
    border: 1px solid var(--public-primary-border) !important;
    color: var(--public-text) !important;
}

html.dark .nav-project:hover {
    background: rgba(167, 139, 250, 0.2) !important;
}

html.dark :is(.nav-project-label, .stage-number) {
    color: var(--public-primary) !important;
}

/* Services and process --------------------------------------------------- */
html.dark .service-visual {
    background: linear-gradient(135deg, var(--public-surface-muted), var(--public-surface-raised)) !important;
}

html.dark .service-visual::before {
    background: linear-gradient(135deg, var(--public-primary-soft), rgba(167, 139, 250, 0.04)) !important;
}

html.dark :is(.service-content h3, .service-icon i, .service-number) {
    color: var(--public-primary) !important;
}

html.dark :is(.tag, .process-detail-tag) {
    background: var(--public-primary-soft) !important;
    color: var(--public-primary) !important;
    border: 1px solid var(--public-primary-border) !important;
}

html.dark :is(.process-timeline-description, .process-principle-description, .supporting-card p) {
    color: var(--public-text-muted) !important;
}

html.dark .process-principles-grid {
    border-color: var(--public-border) !important;
}

html.dark :is(.process-timeline-content, .process-principle-card, .supporting-card) {
    background: var(--public-surface-raised) !important;
    border-color: var(--public-border) !important;
    color: var(--public-text) !important;
}

html.dark .tools-section {
    background: var(--public-surface-soft) !important;
    border: 1px solid var(--public-border) !important;
}

html.dark .tools-section-title {
    color: var(--public-text-strong) !important;
}

html.dark .tools-section-subtitle {
    color: var(--public-text-muted) !important;
}

html.dark .cta-section {
    background: var(--public-surface-raised) !important;
    border: 1px solid var(--public-border) !important;
}

html.dark .cta-button {
    background: var(--public-primary) !important;
    color: #17111f !important;
}

html.dark .rhythm-cta .cta-link {
    background: var(--public-surface-raised) !important;
    border-color: var(--public-primary-border) !important;
    color: var(--public-primary) !important;
}

html.dark .rhythm-cta .cta-link:hover {
    background: var(--public-primary-soft) !important;
    border-color: var(--public-primary) !important;
    color: #ffffff !important;
}

html.dark img:not(.nav-logo-img) {
    color-scheme: only light;
}

@media (prefers-reduced-motion: reduce) {
    html,
    body,
    body::before,
    body::after {
        transition: none;
    }
}