/* Reference blue palette (#0071e3). Load after the component styles; geometry and motion stay with them. */
:root {
  --blue: #0071e3;
  --heading-blue: #0033a1;
  --navy: #123f7b;
  --ink: #253b55;
  --muted: #536b86;
  --line: #d5e3f4;
  --paper: #fff;
  --forest: #0071e3;
  --deep: #102e59;
  --cream: #fff;
  --gold: #bfdcff;
  --sky-strong: #095fbe;
  --sky-hover: #005ab8;
  --sky-soft: #f8fbff;
  --sky-wash: #edf5ff;
  --sky-focus: #0b65c2;
}

::selection { background: #d1e5ff; color: #102e59; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible { outline-color: var(--sky-focus); }

.products .section-heading .section-title,
.applications .section-heading .section-title,
.technology .section-heading .section-title { color: var(--heading-blue); }

/* Navigation keeps white labels on a clear blue field. */
.site-header { background: var(--blue); color: #fff; }
.utility-bar { background: #123f7b; color: #f1f7ff; }
.utility-bar > .container > span { color: #dceaff; }
.utility-bar a { color: #f1f7ff; }
.utility-bar a:is(:hover, :focus-visible, :active) { background: #1c5599; color: #fff; }
.site-header nav a,
html[lang=en] .site-header nav a,
.site-header .header-action-link,
html[lang=en] .site-header .header-action-link { color: #fff; }
.site-header nav a:is(:hover, :focus-visible),
.site-header nav a[aria-current],
html[lang=en] .site-header nav a:is(:hover, :focus-visible),
html[lang=en] .site-header nav a[aria-current],
.site-header .header-action-link:is(:hover, :focus-visible),
html[lang=en] .site-header .header-action-link:is(:hover, :focus-visible) {
  background: var(--sky-strong);
  color: #fff;
}
.site-header nav a:active,
html[lang=en] .site-header nav a:active,
.site-header .header-action-link:active,
html[lang=en] .site-header .header-action-link:active { background: #004fa8; color: #fff; }
.site-header nav a:focus-visible,
.site-header .header-action-link:focus-visible { outline-color: #c7e0ff; }
.language span { color: #d8eaff; }

/* The film itself keeps its original color; only the existing shade is retinted. */
.hero-media { background: #102e59; }
.hero-shade {
  background: linear-gradient(90deg, #102b4fe8, #102b4f99 32%, #102b4f26 58%, transparent 78%),
    linear-gradient(0deg, #102b4fcc, transparent 25%);
}
.hero .eyebrow.light,
.hero-intro,
.scroll-cue { color: #f1f7ff; }
.hero-signature { color: #dfecff; }
.hero-signature > span:first-child { color: #fff; }
.hero-bottom { border-color: #c6deff45; }
.scroll-icon { border-color: #c6deff80; }

/* Light surfaces and primary actions. */
.button.cream { background: #fff; border-color: #fff; color: var(--blue); }
.button.cream:hover { background: var(--sky-wash); border-color: var(--sky-wash); color: var(--sky-strong); }
.button.green { background: var(--blue); border-color: var(--blue); color: #fff; }
.button.green:hover { background: var(--sky-hover); border-color: var(--sky-hover); }
.cta-pill { background: #fff; border-color: var(--blue); color: var(--blue); }
.cta-pill:focus-visible { background: var(--sky-wash); border-color: var(--blue); color: var(--sky-strong); outline-color: var(--sky-focus); }
.cta-pill:active { background: #d9eaff; color: var(--sky-strong); }
.application-copy > .cta-pill,
.about-copy > .cta-pill { border-color: #fff; }
.intro h2,
.stat strong,
.eyebrow,
.text-link,
.tech-point h3,
.career-banner h2 { color: var(--blue); }
.text-link.pale { color: #fff; }
.stat strong span { color: #4879af; }
.toolbar-note,
.tiny { color: #5b718a; }
.filter-group button { color: var(--muted); }
.filter-group button[aria-pressed=true] { color: var(--sky-strong); }
.filter-group button::after { background: var(--blue); }

/* Product photography remains untouched above the coordinated blue card body. */
.products .product-card {
  background: linear-gradient(150deg, #146ac5, #095fbe);
  border-color: #cedff5;
  box-shadow: 0 4px 14px #153e7214;
}
.products .product-image { background: #edf3fb; }
.products .product-image:focus-visible { outline-color: #a5cfff; }
.products .product-label { background: var(--blue); color: #fff; }
.products .product-label.outline { background: #f8fbffe8; border-color: #aecbed; color: var(--sky-strong); }
.products .product-body,
.products .product-info h3,
html[lang=en] .products .product-info h3,
.products .product-power { color: #fff; }
.products .product-info .tiny { color: #e5f0ff; }
.products .product-desc { color: #f3f8ff; }
.products .product-power { background: #ffffff0d; border-color: #c8e2ff70; }
.products .product-power small { color: #edf5ff; }
.products .product-detail-link { background: transparent; color: #fff; }
.products .product-detail-link::after { background: #c3e0ff; }
.products .product-detail-link:is(:hover, :focus-visible) { background: var(--sky-wash); color: #0a56a7; }
.products .product-detail-link:is(:hover, :focus-visible)::after { background: #0a56a7; }
.products .product-detail-link:focus-visible { outline-color: #c3e0ff; }

/* Applications and technology bridge the pale sections and the darker feature. */
.applications { background: var(--sky-soft); color: var(--ink); }
.applications .eyebrow.light { color: var(--blue); }
.application-tabs { background: #fff; border-color: var(--line); }
.application-tabs button { color: #566e8a; }
.application-tabs button:is(:hover, :focus-visible),
.application-tabs button[aria-selected=true] { background: var(--sky-wash); color: var(--sky-strong); }
.application-tabs button::after { background: var(--blue); }
.application-panel { background: #0c65c8; color: #fff; }
.application-visual { background: #123f7b; }
.application-copy .eyebrow.light { color: #eaf3ff; }
.application-copy > p:not(.eyebrow) { color: #f3f8ff; }
.application-tags span { border-color: #c9dfff6b; color: #f0f6ff; }
.image-caption { background: linear-gradient(transparent, #102e59c9); color: #f0f6ff; }
.technology .optics-illustration {
  background-color: #eff5ff;
  background-image: linear-gradient(#0071e30a 1px, transparent 1px),
    linear-gradient(90deg, #0071e30a 1px, transparent 1px);
  border-color: #d5e3f6;
  box-shadow: 0 4px 14px #153e720a;
}
.diagram-label,
.diagram-footer { color: #526f93; }
.diagram-footer { border-color: #cedff3; }
.point-no { color: #5a7b9e; }
.about { background: var(--blue); color: #fff; }
.about-copy .eyebrow,
.about-copy .feature-label { color: #fff; }
.about-copy > p:not(.eyebrow) { color: #fff; }
.about-copy > .text-link { color: #fff; }
.about-photo > div { background: linear-gradient(transparent, #102e59d9); color: #eaf3ff; }
.career-banner { background: #eff5ff; border-color: #d9e6f7; }

/* News retains its blue carousel, within the same vivid-blue family. */
.journal { background: var(--sky-soft); }
.journal .news-card { background: #095fbe; color: #fff; box-shadow: 0 8px 20px #153e7213; }
.journal .news-card-image { background: #e6effb; }
.journal .news-card h3 { color: #fff; }
.journal .news-date,
.journal .news-card-category { color: #edf5ff; }
.journal .news-card-rule { background: #c3e0ff; }
.journal .news-track:focus-visible,
.journal .news-arrow:focus-visible,
.journal .news-dot:focus-visible { outline-color: var(--blue); }
.journal .news-arrow { background: transparent; border-color: var(--blue); color: var(--blue); }
.journal .news-arrow:is(:hover, :focus-visible) { background: var(--blue); color: #fff; }
.journal .news-dot::before { border-color: var(--blue); }

/* Dialogs share the page palette without changing their layout. */
dialog { background: #fff; color: var(--ink); }
dialog::backdrop { background: #102e59c2; }
.dialog-close { background: #fff; border-color: #c5d8ef; color: var(--blue); }
form label > span { color: #536e90; }
input,
textarea,
select { background: #f8fbff; border-color: #c5d8ef; color: var(--ink); }
.form-note,
.spec-note,
.product-source { color: #566f8e; }
.release-note { background: #edf5ff; border-left-color: var(--blue); color: #3c6595; }
#contact-result:not(:empty) { background: #eff5ff; border-color: #cbdff7; }
.email-draft { background: #fff; border-color: var(--line); }
#toast { background: #123f7b; border-color: #658cb7; color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .cta-pill:hover { background: var(--sky-wash); border-color: var(--blue); color: var(--sky-strong); }
}
@media (max-width: 960px) {
  .site-header nav,
  html[lang=en] .site-header nav { background: #0071e3; border-color: #d9e9ff40; }
}
@media (max-width: 700px) {
  .hero-shade {
    background: linear-gradient(180deg, #102b4f99, transparent 75%),
      linear-gradient(90deg, #102b4fa6, #102b4f12),
      linear-gradient(0deg, #102b4fcc, transparent 25%);
  }
}