/* Shared Digital Buckeye dark theme, aligned with the Opsentra site palette. */
:root {
    --db-theme-canvas: #020617;
    --db-theme-surface: #0f172a;
    --db-theme-surface-raised: #111827;
    --db-theme-rule: #1e293b;
    --db-theme-text: #f8fafc;
    --db-theme-soft: #cbd5e1;
    --db-theme-muted: #94a3b8;
    --db-theme-cyan: #22d3ee;
    --db-theme-blue: #2563eb;
}

.db-site,
.db-site main {
    background: var(--db-theme-canvas);
    color: var(--db-theme-text);
}

.db-site .db-eyebrow {
    color: var(--db-theme-cyan);
}

.db-site :where(h1, h2, h3, h4, h5, h6) {
    color: var(--db-theme-text);
}

/* Opsentra uses neutral tracking. Remove the legacy negative tracking that
   causes bold display letters to visually merge on interior pages. */
.db-site main :where(h1, h2, h3) {
    letter-spacing: 0 !important;
}

.db-site :where(p, li, dd) {
    color: var(--db-theme-soft);
}

.db-site .db-text-link {
    color: var(--db-theme-text);
    text-decoration-color: var(--db-theme-cyan);
}

.db-site .db-text-link:hover {
    color: var(--db-theme-cyan);
}

.db-site .db-button--secondary {
    border-color: var(--db-theme-cyan);
    color: var(--db-theme-text);
}

.db-site .db-button--secondary:hover {
    border-color: var(--db-theme-cyan);
    background: var(--db-theme-cyan);
    color: var(--db-theme-canvas);
}

/* Service overview and individual service pages. */
.service-page,
.service-page main,
.service-page .service-hero,
.service-page .service-hero--overview,
.service-page .service-overview,
.service-page .capability-map,
.service-page .service-problem,
.service-page .software-audiences,
.service-page .software-build,
.service-page .software-example,
.service-page .service-value,
.service-page .vr-problem,
.service-page .vr-capabilities,
.service-page .vr-work,
.service-page .video-needs,
.service-page .video-process,
.service-page .video-case,
.service-page .interactive-support,
.service-page .service-cta {
    background: var(--db-theme-canvas);
    color: var(--db-theme-text);
}

.service-page .service-subnav {
    border-color: var(--db-theme-rule);
    background: rgba(2, 6, 23, 0.96);
}

.service-page .service-subnav a {
    border-color: var(--db-theme-rule);
    color: var(--db-theme-soft);
}

.service-page .service-subnav a:hover {
    color: var(--db-theme-cyan);
}

.service-page .service-subnav a[aria-current="page"] {
    background: var(--db-theme-blue);
    color: var(--db-theme-text);
}

.service-page h1,
.service-page h2,
.service-page h3,
.service-page h4,
.service-page .service-section-heading h2,
.service-page .service-paths h3,
.service-page .capability-map h2,
.service-page .interactive-support h2 {
    color: var(--db-theme-text);
}

.service-page .service-hero__summary p,
.service-page .service-paths p,
.service-page .service-paths li,
.service-page .capability-map li p,
.service-page .interactive-support__grid > div:last-child > p {
    color: var(--db-theme-soft);
}

.service-page--overview .service-paths p,
.service-page--overview .service-paths li,
.service-page--overview .capability-map li p {
    color: #dbeafe;
}

.service-page--software .service-hero__summary p,
.service-page--software .service-problem__grid > div:last-child > p,
.service-page--software .software-audiences p,
.service-page--software .software-build__list p,
.service-page--software .software-example__grid > div:last-child p,
.service-page--software .service-cta p {
    color: #dbeafe;
}

.service-page .vr-problem__points p,
.service-page .vr-capabilities__grid p,
.service-page .video-needs__types p,
.service-page .video-process__steps p {
    color: var(--db-theme-soft);
}

.service-page :where(
    .service-hero__summary p,
    .service-paths li,
    .capability-map li p,
    .interactive-support__grid > div:last-child > p,
    .video-needs__types p,
    .software-build__list p,
    .software-example__grid > div:last-child p,
    .vr-problem__points p,
    .video-process__steps p,
    .video-case li,
    .service-cta p
) {
    color: var(--db-theme-soft);
}

.service-page :where(
    .service-section-heading,
    .service-paths,
    .service-paths article,
    .service-paths img,
    .service-paths li,
    .capability-map ol,
    .capability-map li,
    .software-audiences__grid,
    .software-audiences__grid article,
    .software-build__list,
    .software-build__list article,
    .vr-problem__points,
    .vr-problem__points article,
    .vr-capabilities__grid,
    .vr-capabilities__grid article,
    .video-needs__types,
    .video-needs__types article,
    .video-process__steps,
    .video-process__steps li,
    .service-value ul,
    .service-value li
) {
    border-color: var(--db-theme-rule);
}

.service-page :where(
    .service-paths article,
    .software-audiences__grid article,
    .vr-capabilities__grid article,
    .video-needs__types article
) {
    background: var(--db-theme-surface);
}

.service-page :where(.capability-map li span, .video-process__steps span) {
    color: var(--db-theme-cyan);
}

/* Projects, About, and Contact use local tokens; remapping them converts their
   complete component systems without flattening their editorial layouts. */
.projects-page {
    --projects-ink: var(--db-theme-text);
    --projects-muted: var(--db-theme-soft);
    --projects-rule: var(--db-theme-rule);
    --projects-panel: var(--db-theme-surface);
    --projects-accent: var(--db-theme-cyan);
}

.about-page {
    --about-ink: var(--db-theme-text);
    --about-muted: var(--db-theme-soft);
    --about-rule: var(--db-theme-rule);
    --about-panel: var(--db-theme-surface);
    --about-accent: var(--db-theme-cyan);
}

.contact-page {
    --contact-ink: var(--db-theme-text);
    --contact-muted: var(--db-theme-soft);
    --contact-rule: var(--db-theme-rule);
    --contact-panel: var(--db-theme-surface);
    --contact-accent: var(--db-theme-cyan);
}

.projects-page,
.projects-page main,
.projects-page :where(.projects-hero, .projects-featured, .vr-projects, .projects-cta),
.about-page,
.about-page main,
.about-page :where(.about-hero, .about-origin, .about-team, .about-experience, .about-approach, .about-capabilities, .about-audiences, .about-cta),
.contact-page,
.contact-page main,
.contact-page :where(.contact-hero, .contact-main) {
    background: var(--db-theme-canvas);
    color: var(--db-theme-text);
}

.projects-page :where(.project-feature, .project-case, .project-card, .project-card--tinted),
.about-page :where(.about-team__grid article, .about-audiences__grid article),
.contact-page .contact-form-panel {
    background: var(--db-theme-surface);
    box-shadow: none;
}

.projects-page :where(.project-feature__media, .project-video__trigger),
.contact-page :where(.contact-status, .contact-field input, .contact-field select, .contact-field textarea) {
    background: var(--db-theme-surface-raised);
    color: var(--db-theme-text);
}

.contact-page .contact-field :where(input, select, textarea) {
    border-color: #475569;
}

.contact-page .contact-field input,
.contact-page .contact-field select,
.contact-page .contact-field textarea {
    background: #ffffff;
    color: #101114;
}

.contact-page .contact-field select option {
    background: #ffffff;
    color: #101114;
}

.contact-page .contact-field select:invalid {
    color: #555b65;
}

.contact-page .contact-field :where(input, select, textarea)::placeholder {
    color: #555b65;
}

.contact-page .contact-main__aside address a {
    color: var(--db-theme-cyan);
}

/* Interior hero scale follows Opsentra: authoritative, readable, and compact
   enough to leave room for the supporting message. */
.service-page .service-hero h1,
.projects-page .projects-hero h1,
.about-page .about-hero h1,
.contact-page .contact-hero h1 {
    max-width: 14ch;
    font-size: clamp(2.75rem, 4.6vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.contact-page .contact-hero h1 {
    max-width: 18ch;
    font-size: clamp(2.5rem, 3.5vw, 3.65rem);
}

.projects-page .projects-hero__grid > div:last-child > p,
.about-page .about-hero__summary p,
.contact-page .contact-hero__grid > div:last-child p {
    color: var(--db-theme-soft);
}

.projects-page .projects-section-heading h2,
.projects-page .project-feature__content h3,
.projects-page .project-case__identity h3,
.projects-page .project-card__heading h3,
.projects-page .projects-cta h2,
.about-page .about-origin h2,
.about-page .about-section-heading h2,
.about-page .about-approach h2,
.about-page .about-capabilities h2,
.about-page .about-audiences__grid h3,
.about-page .about-cta h2,
.contact-page .contact-main__aside h2,
.contact-page .contact-form-panel__heading h2 {
    color: var(--db-theme-text);
}

@media (max-width: 47.998rem) {
    .service-page .service-hero h1,
    .projects-page .projects-hero h1,
    .about-page .about-hero h1,
    .contact-page .contact-hero h1 {
        font-size: clamp(2.15rem, 8.5vw, 2.65rem);
    }
}

/* Legacy VR portfolio page. */
.vr-work-page,
.vr-work-page main,
.vr-work-page .content-section,
.vr-work-page .content-container {
    background: var(--db-theme-canvas);
    color: var(--db-theme-text);
}

.vr-work-page .content-section {
    border-bottom: 1px solid var(--db-theme-rule);
}

.vr-work-page #contact .form-control {
    border-color: #475569;
    background: var(--db-theme-surface);
    color: var(--db-theme-text);
}