/* Presets share the logo's silver/blue palette and native Fluent controls. */
:root {
    --hub-navigation: #202630;
    --hub-link-hover: #c3dcf4;
    --hub-error-text: #ffb4b4;
    --hub-error-surface: #3d252a;
    --hub-notice-text: #c4daf0;
    --hub-notice-surface: #243344;
    --hub-radius: 6px;
}

:root[data-design="midnight"] {
    --hub-navigation: #182638;
    --hub-background: #121d2b;
    --hub-surface: #1b2c3e;
    --hub-surface-raised: #273c51;
    --hub-border: #3a5269;
    --hub-text: #e2eaf1;
    --hub-muted: #b2c2d1;
    --hub-accent: #9bc8ec;
    --hub-radius: 4px;
}

:root[data-design="silver"] {
    --hub-navigation: #d1d9e1;
    color-scheme: light;
    --hub-background: #dce1e6;
    --hub-surface: #edf0f3;
    --hub-surface-raised: #cdd6df;
    --hub-border: #aab6c2;
    --hub-text: #243341;
    --hub-muted: #485d70;
    --hub-accent: #285e88;
    --hub-link-hover: #173e5d;
    --hub-error-text: #8a2028;
    --hub-error-surface: #f5dfe2;
    --hub-notice-text: #254c6c;
    --hub-notice-surface: #d6e4ef;
    --hub-radius: 3px;
}

:root[data-design="studio"] {
    --hub-navigation: #2a2d30;
    --hub-background: #242628;
    --hub-surface: #303336;
    --hub-surface-raised: #3b4147;
    --hub-border: #535d66;
    --hub-text: #e6e8ea;
    --hub-muted: #bbc1c7;
    --hub-accent: #a1c7e4;
    --hub-radius: 2px;
}

/* Match custom page elements to each preset, including the light alternative. */
a:hover { color: var(--hub-link-hover); }
.account-error { color: var(--hub-error-text); background: var(--hub-error-surface); }
.account-notice { color: var(--hub-notice-text); background: var(--hub-notice-surface); }
.validation-message { color: var(--hub-error-text); }
.invalid { outline-color: var(--hub-error-text); }
.account-page, .portfolio-project, .project-facts { border-radius: var(--hub-radius); }
html .home-page .company-summary,
html .home-page .service-item,
html .home-page .contact-section { border-radius: var(--hub-radius); }

/* Midnight: a structured technical presentation with a strong blue edge. */
:root[data-design="midnight"] .home-page .home-introduction {
    border-left: 3px solid #4a88c3;
    padding-left: 28px;
    margin: 16px 0 24px;
}
:root[data-design="midnight"] .home-page .company-summary { background: var(--hub-surface-raised); border-top-width: 1px; }
:root[data-design="midnight"] .home-page .service-item { border-top: 3px solid #4a88c3; }
:root[data-design="midnight"] .portfolio-introduction { border-left: 3px solid #4a88c3; padding-left: 24px; }
:root[data-design="midnight"] .portfolio-project { border-top: 0; border-left: 3px solid #4a88c3; }

/* Silver: soft grey rather than white, with clear blue headings and compact panels. */
:root[data-design="silver"] .home-page h1,
:root[data-design="silver"] .portfolio-introduction h1 { color: #285e88; }
:root[data-design="silver"] .home-page .service-item { background: transparent; border: 0; border-left: 2px solid #4a88c3; }
:root[data-design="silver"] .home-page .company-summary { border-top-color: #4a88c3; }
:root[data-design="silver"] .portfolio-project { border-top: 0; border-left: 3px solid #4a88c3; }

/* Studio: centred editorial introduction and an open service list. */
:root[data-design="studio"] .home-page,
:root[data-design="studio"] .portfolio-page { max-width: 1080px; }
:root[data-design="studio"] .home-page .home-introduction { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; }
:root[data-design="studio"] .home-page .introduction-copy { max-width: 780px; margin: 0 auto; }
:root[data-design="studio"] .home-page h1,
:root[data-design="studio"] .home-page .introduction-text { max-width: none; }
:root[data-design="studio"] .home-page .home-actions { justify-content: center; }
:root[data-design="studio"] .home-page .company-summary { text-align: left; border: 0; border-left: 3px solid #4a88c3; }
:root[data-design="studio"] .home-page .service-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
:root[data-design="studio"] .home-page .service-item { border: 0; border-bottom: 1px solid var(--hub-border); background: transparent; padding: 20px 0; }
:root[data-design="studio"] .home-page .service-item h3 { display: inline; margin-left: 12px; font-size: 1.125rem; }
:root[data-design="studio"] .home-page .service-item p { margin: 10px 0 0; max-width: 760px; }
:root[data-design="studio"] .portfolio-introduction { margin: 0 auto 32px; text-align: center; }
:root[data-design="studio"] .portfolio-project { border-top: 0; border-left: 3px solid #4a88c3; }

@media (max-width: 767px) {
    :root[data-design="midnight"] .home-page .home-introduction { padding-left: 16px; }
    :root[data-design="midnight"] .portfolio-introduction { padding-left: 16px; }
}