/* Light sections for contrast within the dark page, 1 November 2026.
   Opt in per section with data-theme="light"; remove the attribute to revert. */
.section[data-theme="light"] {
  --light-bg: #f4f7fa;
  --light-card: #fff;
  --light-text: #101828;
  --light-muted: #5d6670;
  --light-line: #dde3ea;
  background-color: var(--light-bg);
  color: var(--light-text);
}
.section[data-theme="light"] :is(h2, h3, .section-heading) { color: var(--light-text); }
.section[data-theme="light"] .font-regular { color: var(--light-muted); }
.section[data-theme="light"] .badge-text { color: var(--light-text); opacity: .75; }
.section[data-theme="light"] .badge-dot { background-color: var(--instated-blue); }

/* The glow becomes a soft blue haze on the light surface. */
.section[data-theme="light"][data-glow] {
  --glow-blue: color-mix(in srgb, var(--instated-blue) 22%, transparent);
  --glow-cyan: color-mix(in srgb, var(--instated-cyan) 16%, transparent);
}

.section[data-theme="light"] .v2-vacancy-card {
  background: var(--light-card); color: var(--light-text);
  border-color: var(--light-line); box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 8px 24px rgb(16 24 40 / .05);
}
.section[data-theme="light"] .v2-vacancy-card:hover,
.section[data-theme="light"] .v2-vacancy-card:focus-visible { background: var(--light-card); border-color: rgb(58 123 213 / .55); }
.section[data-theme="light"] .v2-category { color: var(--light-muted); }
.section[data-theme="light"] .v2-vacancy-bottom { border-top-color: var(--light-line); color: var(--light-muted); }
.section[data-theme="light"] .v2-vacancy-label { color: var(--instated-blue); }
.section[data-theme="light"] .v2-card-arrow { background: #eaf0f6; color: var(--light-text); }
.section[data-theme="light"] a:hover .v2-card-arrow { background: var(--instated-blue); color: #fff; }

.section[data-theme="light"] .v2-insight-image { background: #e4e9ef; }
.section[data-theme="light"] .v2-insight-card { color: var(--light-text); }
.section[data-theme="light"] .v2-insight-meta { color: var(--light-muted); }
.section[data-theme="light"] .v2-insight-meta > span:first-child::before { background: var(--instated-blue); }

.section[data-theme="light"] .v2-text-link { color: var(--light-text); }
.section[data-theme="light"] .v2-text-link:hover,
.section[data-theme="light"] .v2-text-link > .v2-arrow { color: var(--instated-blue); }

.section[data-theme="light"] .v2-slider-status { color: var(--light-muted); }
.section[data-theme="light"] .v2-slider-arrows button { background: var(--light-card); border-color: var(--light-line); color: var(--light-text); }
.section[data-theme="light"] .v2-slider-arrows button:hover:not(:disabled) { background: #eef4fb; border-color: var(--instated-blue); }

.section[data-theme="light"] .v2-partners { border-top-color: var(--light-line); }
.section[data-theme="light"] .v2-partners > p { color: var(--light-muted); }
.section[data-theme="light"] .v2-draft-note { color: #7a828c; }
/* The template logos are light artwork; render them as quiet dark marks. */
.section[data-theme="light"] .company-logo { filter: brightness(0); opacity: .5; }

.section[data-theme="light"] :is(.v2-slider-track, .v2-insight-grid, .logo-marque-main):focus-visible,
.section[data-theme="light"] a:focus-visible { outline-color: var(--instated-blue); }

/* Deep-blue accent cards: both audience calls to action and subpage CTAs.
   Darker blues keep white copy above WCAG AA contrast. */
.v2-blue-card {
  background-color: #245194;
  background-image:
    radial-gradient(ellipse at 100% 0%, rgb(0 210 255 / .28), transparent 60%),
    linear-gradient(135deg, #306bbd, #193d70);
  color: #fff;
}
/* Mirror the light on the candidate card so the pair frames the section. */
.v2-blue-card.v2-audience-card:not(.v2-audience-employer) {
  background-image:
    radial-gradient(ellipse at 0% 0%, rgb(0 210 255 / .28), transparent 60%),
    linear-gradient(225deg, #306bbd, #193d70);
}
.v2-blue-card h2 { color: #fff; }
.v2-blue-card .font-regular { color: rgb(255 255 255 / .86); }
.v2-blue-card .badge-text { color: #fff; opacity: .9; }
.v2-blue-card .badge-dot { background-color: var(--instated-cyan); }
.v2-blue-card .primary-button:not(.w-variant-ac55e2a0-18d0-67fe-9c32-3f104cee4ea1) { background: #fff; color: #101010; }
.v2-blue-card .v2-text-link,
.v2-blue-card .v2-text-link > .v2-arrow { color: #fff; }
.v2-blue-card .v2-text-link:hover { color: #d8f5ff; }