/* Keep the cinematic layout in both modes. Dark is the default in cinema.css. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--studio-border); border-radius: 3px; color: var(--studio-ink); background: transparent; cursor: pointer; }
.theme-toggle:hover { border-color: currentColor; }
.theme-moon, :root[data-theme="light"] .theme-sun { display: none; }
:root[data-theme="light"] .theme-moon { display: block; }

/* Icons sit directly on their surrounding surface. */
.capability-tile img, .capability-tab-icon { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
.studio-icon { background: transparent; border: 0; }
.service-media .studio-icon { box-shadow: none; }
/* These source marks use dark ink; preserve their silhouette on dark surfaces. */
:root:not([data-theme="light"]) :is(.capability-tile, .capability-tab:not(.is-active)) img:is([src$="/openai.svg"], [src$="/github.svg"], [src$="/unity.svg"], [src$="/filmora.svg"]) { filter: brightness(0) invert(1); }
:root[data-theme="light"] .capability-tab.is-active img:is([src$="/openai.svg"], [src$="/github.svg"], [src$="/unity.svg"], [src$="/filmora.svg"]) { filter: brightness(0) invert(1); }
:root:not([data-theme="light"]) :is(.capability-tile, .capability-tab:not(.is-active)) img:is([src$="/dot-net-transparent.svg"], [src*="/generic-"], [src*="/testing-"]) { filter: brightness(1.9); }
:root[data-theme="light"] .capability-tab.is-active img:is([src*="/generic-"], [src*="/testing-"]) { filter: brightness(0) invert(1); }

:root[data-theme="light"] {
    color-scheme: light;
    --background: #f5f4f0;
    --surface: #fffefa;
    --surface-container-lowest: #fffefa;
    --surface-container-low: #efeee9;
    --surface-container: #e9e8e2;
    --surface-container-high: #e1e1db;
    --on-surface: #202630;
    --on-surface-variant: #606874;
    --outline-variant: #d2d3d1;
    --primary: #6540a3;
    --studio-ink: #202630;
    --studio-muted: #606874;
    --studio-purple: #6540a3;
    --studio-border: #252b3426;
    --cinema-accent: #446478;
}
:root[data-theme="light"] .studio-header { background: #f5f4f0ed; border-color: var(--studio-border); }
:root[data-theme="light"] .studio-header.is-scrolled { background: #f5f4f0f7; }
:root[data-theme="light"] .studio-nav-link { color: #59616d; }
:root[data-theme="light"] .studio-nav-link:hover,
:root[data-theme="light"] .studio-nav-link.is-active { color: #202630; }
:root[data-theme="light"] .studio-signin { border-color: #252b3440; }
:root[data-theme="light"] .studio-signin:hover { border-color: #252b3480; background: #252b3408; }
:root[data-theme="light"] .studio-mobile-nav { background: #f5f4f0; }
/* The photo scene and white wordmark retain their original contrast. */
.studio-hero { color: #f2f0e9; }
.studio-hero .hero-secondary { color: #f2f0e9; }
:root[data-theme="light"] .purpose-section,
:root[data-theme="light"] .about-section { background: #f5f4f0; }
:root[data-theme="light"] .services-section,
:root[data-theme="light"] .capabilities-section { background: #eeede7; border-color: var(--studio-border); }
:root[data-theme="light"] .feedback-section { background: #f5f4f0; border-color: var(--studio-border); }
:root[data-theme="light"] .contact-section { background: radial-gradient(ellipse at 90% 5%, #6376a410, transparent 50%), #eeede7; border-color: var(--studio-border); }
:root[data-theme="light"] :is(.purpose-card, .service-card, .about-card, .feedback-card, .feedback-form-card, .contact-form-card, .contact-email-card, .office-card, .contact-social-card, .capability-tile, .feedback-state, .gate-notice, .modal-panel) { background: #fffefa; border-color: var(--studio-border); }
:root[data-theme="light"] :is(.purpose-card, .service-card, .about-card):hover { background: #fffefa; border-color: #252b3450; box-shadow: 0 16px 32px #252b340b; }
:root[data-theme="light"] .studio-icon { color: #6540a3; }
:root[data-theme="light"] .service-media .studio-icon { color: #f2f0e9; }
/* Keep media icons entirely over the photograph, without backing plates. */
.service-media .studio-icon { bottom: 12px; }
:root[data-theme="light"] .service-details { border-color: var(--studio-border); }
:root[data-theme="light"] .service-details summary { color: #6540a3; }
:root[data-theme="light"] .capability-tab { border-color: var(--studio-border); color: #59616d; }
:root[data-theme="light"] .capability-tab:hover { background: #252b3408; border-color: #252b3460; }
:root[data-theme="light"] .capability-tab.is-active { background: #202630; border-color: #202630; color: #f2f0e9; }
:root[data-theme="light"] .capability-group-title { color: #59616d; }
:root[data-theme="light"] :is(.feedback-card-comment, .feedback-signin p) { color: #505966; }
:root[data-theme="light"] :is(.feedback-card-meta, .feedback-counter, .contact-field-hint, .contact-file-size) { color: #606874; }
:root[data-theme="light"] :is(.contact-field label, .contact-label, .feedback-sort label) { color: #303844; }
:root[data-theme="light"] :is(.contact-field input, .contact-field textarea, .feedback-select, .feedback-sort .feedback-select) { background-color: #f5f4f0; border-color: #252b3438; }
:root[data-theme="light"] :is(.contact-field input, .contact-field textarea)::placeholder { color: #68717d; }
:root[data-theme="light"] :is(.contact-field input, .contact-field textarea, .feedback-select):focus { border-color: #6540a3; box-shadow: 0 0 0 3px #6540a315; }
:root[data-theme="light"] .contact-field.has-error :is(input, textarea, .feedback-select) { border-color: #b42332; }
:root[data-theme="light"] .contact-field-error { color: #b42332; }
:root[data-theme="light"] :is(.contact-reply-note, .contact-field .contact-file-button, .contact-file-chip, .feedback-card-service) { background: #f2eff8; border-color: #6540a330; color: #6540a3; }
:root[data-theme="light"] .contact-field .contact-file-button:hover { background: #e8e1f3; border-color: #6540a3; }
:root[data-theme="light"] :is(.contact-reply-note, .feedback-card-service, .contact-file-remove) { color: #59616d; }
:root[data-theme="light"] .contact-file-remove:hover { background: #252b340c; }
:root[data-theme="light"] :is(.contact-email-card a, .office-card a, .contact-inline-button) { color: #6540a3; }
:root[data-theme="light"] .contact-social-card .social-link { color: #505966; border-color: var(--studio-border); }
:root[data-theme="light"] .feedback-avatar { background: #eee8f7; border-color: #6540a330; }
:root[data-theme="light"] .feedback-rating-option { background: #f5f4f0; color: #606874; border-color: var(--studio-border); }
:root[data-theme="light"] .feedback-rating-option.is-selected { background: var(--rating-tint); color: var(--rating-ink); border-color: var(--rating-ink); }
:root[data-theme="light"] .feedback-state > .line-icon { color: #b42332; }
:root[data-theme="light"] .feedback-state { color: var(--studio-muted); }
:root[data-theme="light"] .btn-secondary { color: #202630; border-color: #252b3440; }
:root[data-theme="light"] .btn-secondary:hover { background: #252b3408; border-color: #252b3480; }
/* Preserve the logo gradient on primary actions in both themes. */
:root[data-theme="light"] :is(.studio-section .studio-button.primary, .btn-primary) { background: var(--brand-gradient); background-size: 150% 100%; color: #fff; border-color: transparent; }
:root[data-theme="light"] :is(.studio-section .studio-button.primary, .btn-primary):hover { background-position: 100% 0; }
:root[data-theme="light"] .skip-link { background: #202630; color: #f2f0e9; border-color: #202630; }
:root[data-theme="light"] .spinner-on-primary { border-color: #ffffff59; border-top-color: #fff; }
:root[data-theme="light"] .studio-footer { --studio-ink: #f2f0e9; --studio-purple: #c4b5f4; }
:root[data-theme="light"] .update-bar { background: #fffefa; color: #505966; border-color: var(--studio-border); }
:root[data-theme="light"] .update-bar strong { color: #202630; }
:root[data-theme="light"] .boot { background: #f5f4f0; }

@media (max-width:399px) {
    .studio-nav { gap: 6px; }
    .studio-nav-account { gap: 6px; }
    .studio-signin { padding-inline: 8px; }
}