/* Shared surface hierarchy, loaded after the component styles in both languages. */
:root {
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #edf2f8;
  --section-surface: #f0f4f9;
  --field-surface: #f8fafc;
  --line: #d7e0ec;
  --muted: #52627a;
  --ice: #e9f1fd;
  --blue: #075bc8;
  --action: var(--brand-primary, #076cf0);
  --card-shadow: 0 8px 28px -16px #1b355525;
  --hover-shadow: 0 14px 32px -18px #1b35553d;
  --focus-ring: #075bc8;
  --page-scroll-track: #dfe7f1;
  --page-scroll-thumb: #6a83a6;
}
html[data-theme="dark"] {
  --paper: #0c1321;
  --surface: #141f30;
  --surface-raised: #1b2a40;
  --surface-soft: #1c2c42;
  --section-surface: #101b2b;
  --field-surface: #101a2a;
  --white: #141f30;
  --navy: #edf2fa;
  --muted: #adbbcf;
  --line: #30425b;
  --ice: #203653;
  --blue: #9bc4ff;
  --card-shadow: 0 8px 28px -16px #0005;
  --hover-shadow: 0 14px 32px -18px #0009;
  --focus-ring: #9bc4ff;
  --page-scroll-track: #213149;
  --page-scroll-thumb: #6d91c2;
}

html[data-theme] .site-header,
html[data-theme] .site-header.is-scrolled { background: var(--paper); border-color: var(--line); box-shadow: none; backdrop-filter: none; }
html[data-theme] .site-header.is-scrolled { box-shadow: 0 4px 18px -12px #10213b40; }
html[data-theme] .mobile-menu { background: var(--surface); border-color: var(--line); }
html[data-theme] .button-blue,
html[data-theme] .studio-browse-link { background: var(--action); border-color: var(--action); color: #fff; }
html[data-theme] .button-blue:hover,
html[data-theme] .studio-browse-link:hover { background: var(--blue-dark, #005aca); border-color: var(--blue-dark, #005aca); }
html[data-theme] .button-outline { border-color: var(--line); color: var(--navy); }
html[data-theme] .button-outline:hover { background: var(--ice); border-color: var(--blue); }
html[data-theme] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }

/* Portraits and channel cards belong to the selected theme, including their rail. */
html[data-theme] .teacher-partners-band { background: var(--section-surface); color: var(--navy); border-block: 1px solid var(--line); }
html[data-theme] .teacher-portrait { background: var(--surface); border-color: var(--line); box-shadow: var(--card-shadow); }
html[data-theme] .teacher-portrait-photo { background: var(--surface-soft); border-color: var(--surface-soft); box-shadow: 0 0 0 1px var(--line); }
html[data-theme] .teacher-portrait-name { color: var(--navy); }
html[data-theme] .teacher-portraits { border-color: var(--line); }
html[data-theme] .clients-section { background: var(--paper); color: var(--navy); }
html[data-theme] .clients-heading h2 span { color: var(--blue); }
html[data-theme] .clients-heading p { color: var(--muted); }
html[data-theme] .client-controls button { background: var(--surface); color: var(--navy); border-color: var(--line); }
html[data-theme] .client-controls button:hover:not(:disabled) { background: var(--ice); border-color: var(--blue); }
html[data-theme] .client-card {
  --client-surface: var(--surface);
  --client-text: var(--navy);
  --client-muted: var(--muted);
  --client-line: var(--line);
  --client-inset: var(--surface-soft);
  --client-hover: var(--ice);
  border-color: var(--line);
  box-shadow: var(--card-shadow);
}
html[data-theme] .client-card:hover { border-color: var(--blue); box-shadow: var(--hover-shadow); }
.clients-track { scrollbar-color: var(--page-scroll-thumb) var(--page-scroll-track); }
@supports selector(::-webkit-scrollbar) {
  .clients-track { scrollbar-color: auto; }
  .clients-track::-webkit-scrollbar-track { background-color: var(--page-scroll-track); }
  .clients-track::-webkit-scrollbar-thumb { background-color: var(--page-scroll-thumb); }
  .clients-track::-webkit-scrollbar-thumb:hover { background-color: var(--page-scroll-hover); }
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .teacher-portrait:hover { background: var(--surface-raised); border-color: var(--blue); box-shadow: var(--hover-shadow); }
}

html[data-theme] .approach-section,
html[data-theme] .work-section,
html[data-theme] .contact-section { background: var(--section-surface); color: var(--navy); }
html[data-theme] .approach-title > .approach-title-lead,
html[data-theme] .approach-copy .approach-sign { color: var(--navy); }
html[data-theme] .approach-copy > .section-label,
html[data-theme] .approach-title > .approach-title-message,
html[data-theme] .approach-copy .approach-sign svg,
html[data-theme] .step-number { color: var(--blue); }
html[data-theme] .approach-copy > p,
html[data-theme] .steps p { color: var(--muted); }
html[data-theme] .steps li,
html[data-theme] .approach-copy .approach-sign { border-color: var(--line); }
html[data-theme] .service:hover { background: var(--ice); }
html[data-theme] .service-top > span { color: var(--muted); }
html[data-theme] .filter { border-color: var(--line); color: var(--navy); }
html[data-theme] .filter.active { background: var(--ice); border-color: var(--blue); color: var(--blue); }
html[data-theme] .filter:hover:not(.active) { background: var(--surface); }

html[data-theme] .results-section .results-board { background: var(--surface); color: var(--navy); border-color: var(--line); box-shadow: var(--card-shadow); }
html[data-theme] .results-board .board-heading strong,
html[data-theme] .results-board .metrics .metric-value { color: var(--navy); }
html[data-theme] .results-board .board-heading > div > span,
html[data-theme] .results-board .metric-label { color: var(--muted); }
html[data-theme] .results-board .metrics > .result-metric { background: var(--field-surface); border-color: var(--line); }
html[data-theme] .results-board .result-metric:first-child { background: var(--ice); border-color: var(--line); }
html[data-theme] .results-board .metric-icon,
html[data-theme] .results-board .result-metric:first-child .metric-label { color: var(--blue); }
html[data-theme] .results-board .result-metric:first-child .metric-icon { color: var(--blue); background: var(--surface); }
html[data-theme] .results-board .youtube-icon { background: var(--surface-soft); border-color: var(--line); color: #ed2939; }

html[data-theme] .packages-grid .package { --package-tint: var(--ice); --package-accent: var(--blue); background: var(--surface); border-color: var(--line); box-shadow: var(--card-shadow); }
html[data-theme] .packages-grid .package-featured { background: linear-gradient(155deg, var(--ice), var(--surface) 70%); border-color: var(--blue); }
html[data-theme] .package .package-badge { border-color: var(--line); }
html[data-theme] .platforms-section { background: var(--paper); }
html[data-theme] .platform-card { background: var(--surface); box-shadow: var(--card-shadow); }
html[data-theme] .studio-panel { background: var(--section-surface); color: var(--navy); border: 1px solid var(--line); }
html[data-theme] .studio-copy .section-label,
html[data-theme] .studio-copy h2 > span:last-child { color: var(--blue); }
html[data-theme] .studio-copy > p { color: var(--muted); }
html[data-theme] .studio-tags > span { color: var(--muted); border-color: var(--line); background: var(--surface); }
html[data-theme] .studio-cta { color: #fff; background: var(--action); }
html[data-theme] .studio-cta:hover { background: var(--blue-dark); }
html[data-theme="light"] .studio-frame { background: linear-gradient(145deg, #e6effc, #f8faff); border-color: #a6bcd9; box-shadow: var(--hover-shadow); }
html[data-theme="light"] .studio-light { background: radial-gradient(ellipse, #9ac2ff40, transparent 65%); }
html[data-theme="light"] .studio-camera { color: #35649f; }
html[data-theme="light"] .studio-corner { border-color: #4179bd; }
html[data-theme="light"] .studio-wave i { background: #7191ba; }
html[data-theme="light"] .studio-wave i:nth-child(5n) { background: #35649f; }
html[data-theme] .studio-partner-card { box-shadow: var(--card-shadow); }
html[data-theme="light"] .studio-partner-placeholder { background: linear-gradient(145deg, #dbe9fc, #edf3fc); color: #35649f; }
html[data-theme] .contact-form { background: var(--surface); border-color: var(--line); box-shadow: var(--card-shadow); }
html[data-theme] .contact-form :is(input, select, textarea) { background: var(--field-surface); border-color: var(--line); color: var(--navy); }
html[data-theme] .contact-form :is(input, textarea)::placeholder,
html[data-theme] .contact-form > .privacy-note { color: var(--muted); }
html[data-theme] .site-footer.mada-footer { background: var(--section-surface); border-color: var(--line); color: var(--navy); }
html[data-theme] .mada-footer :is(.footer-wordmark, h2) { color: var(--navy); }
html[data-theme] .mada-footer :is(.footer-about > p, .footer-column a, .footer-slogan, .footer-legal, .footer-language) { color: var(--muted); }
html[data-theme] .mada-footer .footer-legal { border-color: var(--line); }
html[data-theme] .mada-footer .footer-column a:hover { color: var(--blue); }
html[data-theme] .mada-footer .footer-social a { background: var(--surface); border: 1px solid var(--line); color: var(--navy); }
html[data-theme] .mada-footer .footer-social a:hover { background: var(--ice); border-color: var(--blue); color: var(--blue); }

@media (forced-colors: active) {
  .clients-track { scrollbar-color: auto; }
  .clients-track::-webkit-scrollbar-track { background-color: Canvas; }
  .clients-track::-webkit-scrollbar-thumb { background-color: ButtonText; }
}