:root,
html[data-theme="light"] {
    --page: #f8fafc;
    --ink: #0f172a;
    --muted: #536174;
    --line: #dfe5ec;
    --surface: #fff;
    --soft: #f5f8fa;
    --navy: #0c1930;
    --navy2: #132541;
    --brand: #3457d5;
    --brand2: #5b7ff0;
    --brand-soft: #e8ecfd;
    --pill-hover-bg: #263244;
    --pill-hover-shadow: 0 0 20px rgba(15, 23, 42, .16);
    --shadow: 0 24px 60px rgba(15, 23, 42, .11);
    color-scheme: light
}

.field-error,
.form-status.error {
    color: #b42318
}

.form-status.success {
    color: #087f5b
}

html[data-theme="dark"] {
    --page: #0b1220;
    --ink: #eef5fb;
    --muted: #a9b8ca;
    --line: #29384d;
    --surface: #111d2e;
    --soft: #0e1929;
    --navy: #07101e;
    --navy2: #14243a;
    --brand: #5b82f5;
    --brand2: #7b9dfc;
    --brand-soft: #1c2a4d;
    --pill-hover-bg: #344154;
    --pill-hover-shadow: 0 0 20px rgba(148, 163, 184, .15);
    --shadow: 0 24px 60px rgba(0, 0, 0, .35);
    color-scheme: dark
}

html[data-theme="dark"] body {
    background: var(--page);
    color: var(--ink)
}

html[data-theme="dark"] .site-header {
    background: rgba(11, 18, 32, .9);
    border-color: var(--line)
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .logo-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .doc-nav,
html[data-theme="dark"] .support-menu,
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .utility-toggle {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line)
}

html[data-theme="dark"] .soft {
    background: var(--soft)
}

html[data-theme="dark"] .section.dark {
    background: #020617
}

html[data-theme="dark"] .page-hero {
    background: linear-gradient(180deg, #10251f, var(--page))
}

html[data-theme="dark"] .page-intro {
    background: linear-gradient(135deg, rgb(30 58 95 / .5), rgb(15 23 42 / .8));
    color: #e2e8f0
}

html[data-theme="dark"] .page-closing {
    background: #020617;
    border: 1px solid #1e293b
}

html[data-theme="dark"] .hero-float {
    background: rgba(17, 29, 46, .94);
    border-color: #34455b;
    color: var(--ink)
}

html[data-theme="dark"] .nav-links {
    color: #bdc9d7
}

html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .nav-dd-toggle {
    color: #94a3b8
}

html[data-theme="dark"] .nav-dd .dd-panel {
    background: #0f1b2d;
    border-color: #334155
}

html[data-theme="dark"] .nav-dd .dd-panel a {
    color: #cbd5e1
}

html[data-theme="dark"] .support-menu a {
    color: #d8e3ee
}

html[data-theme="dark"] .nav-dd .dd-panel a:hover {
    background: var(--brand-soft)
}

html[data-theme="dark"] .support-menu a:hover {
    background: #18273a
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .checklist li:before {
    background: var(--brand-soft);
    color: #9db4ff
}

html[data-theme="dark"] .menu-toggle {
    background: #0f1b2d;
    border-color: #334155
}

html[data-theme="dark"] .contact-panel {
    background: var(--navy)
}

html[data-theme="dark"] .cta {
    background: linear-gradient(125deg, #020617, #0d3f4b 60%, #1e3a8a)
}

html[data-theme="dark"] .hero-card {
    background: #020617
}

html[data-theme="dark"] code {
    background: #1b2a3d
}

html[data-theme="dark"] .card:hover {
    border-color: #3a7e6c
}

html[data-theme="dark"] .logo-card img {
    filter: grayscale(1) brightness(1.45)
}

html[data-theme="dark"] .hero-trust {
    color: #b8c5d4
}

html[data-theme="dark"] .field-error,
html[data-theme="dark"] .form-status.error {
    color: #ff9d96
}

html[data-theme="dark"] .form-status.success {
    color: #9db4ff
}

html[data-theme="dark"] .tech-partner-card,
html[data-theme="dark"] .design-section,
html[data-theme="dark"] .design-preview {
    background: #0f1b2d;
    border-color: #334155
}

html[data-theme="dark"] .career-role-card,
html[data-theme="dark"] .career-program-card,
html[data-theme="dark"] .career-apply-panel {
    background: var(--surface);
    border-color: var(--line)
}

html[data-theme="dark"] .design-palette-card,
html[data-theme="dark"] .design-chip {
    background: #0b1627;
    border-color: #334155;
    color: #e2e8f0
}

html[data-theme="dark"] .design-css-input {
    background: #0b1627;
    border-color: #475569;
    color: #f8fafc
}

html[data-theme="dark"] .design-preview-btn {
    color: #fff
}