/* V29 brand alignment
   Keeps the established coral conversion color and brings the supplied VI
   palette, Fredoka display type, and a calmer B2B reading rhythm together. */

@font-face {
  font-family: "Fredoka";
  src: url("assets/fonts/Fredoka-VariableFont_wdth,wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/manrope.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Established website accent, retained as requested. */
  --coral: #e9907d;
  --coral-dark: #984c3e;

  /* Supplied VI palette. */
  --brand-sky: #87ceeb;
  --brand-brown: #5d4037;
  --brand-peach: #ffe4c4;
  --brand-white: #ffffff;
  --brand-gray: #f5f5f5;

  /* Website supporting tokens. */
  --ink: var(--brand-brown);
  --muted: #6f625c;
  --line: #e3d9d2;
  --cream: #faf8f5;
  --sage: #36624f;
  --amber: #8b612b;
  --blue: #356b7f;
  --brand-sky-soft: #e9f7fc;
  --brand-peach-soft: #fff2e2;
  --brand-sage-soft: #edf3ed;
  --brand-focus: #7b3e32;
}

body {
  color: var(--ink);
  font-family: "Manrope", "Noto Sans SC", "Noto Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

h1,
h2,
h3,
.pdp-intro h1,
.page-heading h1,
.feature-hero h1,
.selection-intro h1,
.sim-heading h2,
.ab-buy-heading h3,
.v28-pdp-root h1,
.v28-pdp-root h2,
.v28-pdp-root h3 {
  font-family: "Fredoka", "Manrope", "Noto Sans SC", "Noto Sans", Arial, sans-serif;
  font-variation-settings: "wdth" 98;
  font-weight: 550;
}

html.locale-ar body,
html.locale-ar button,
html.locale-ar input,
html.locale-ar select,
html.locale-ar textarea,
html.locale-ar h1,
html.locale-ar h2,
html.locale-ar h3 {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

html.locale-ja body,
html.locale-ja button,
html.locale-ja input,
html.locale-ja select,
html.locale-ja textarea {
  font-family: "Manrope", "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

html.locale-zh-CN body,
html.locale-zh-CN button,
html.locale-zh-CN input,
html.locale-zh-CN select,
html.locale-zh-CN textarea {
  font-family: "Manrope", "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}

html.locale-ru body,
html.locale-ru button,
html.locale-ru input,
html.locale-ru select,
html.locale-ru textarea {
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
}

html.locale-ja h1,
html.locale-ja h2,
html.locale-ja h3,
html.locale-zh-CN h1,
html.locale-zh-CN h2,
html.locale-zh-CN h3,
html.locale-ru h1,
html.locale-ru h2,
html.locale-ru h3 {
  font-family: "Fredoka", "Manrope", "Noto Sans CJK SC", "Noto Sans CJK JP", "Segoe UI", sans-serif;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline-color: var(--brand-focus);
}

/* A little more breathing room and a legible minimum for recurrent UI copy. */
.eyebrow,
.small-label,
.filter-label,
.clear-link,
.product-label,
.v23-card-number,
.v23-sample-kits article > span,
.v23-two-sided article > span,
.v23-route-card > span,
.v16-procurement-step,
.v16-deliverable-grid article > span,
.sim-eyebrow,
.ab-buy-eyebrow,
.ab-buy-label {
  font-size: 11px;
  line-height: 1.5;
}

.nav28-group-trigger,
.nav28-support-link,
.nav28-language-slot .site-language-control select,
.compare-trigger,
.quote-trigger {
  font-size: 12px;
}

.nav28-group-trigger,
.nav28-support-link {
  padding-inline: 12px;
}

.nav28-language-slot .site-language-control {
  background: var(--brand-white);
  border-color: var(--line);
}

.nav28-language-slot .site-language-control select {
  min-width: 88px;
  max-width: 108px;
}

.nav28-language-slot .site-language-control svg {
  color: var(--blue);
}

.nav28-dropdown {
  border-color: var(--line);
  background: #fffefa;
}

.nav28-item,
.nav28-mobile .nav28-item.mobile-nav-btn {
  font-size: 12px;
}

.nav28-group-trigger:hover,
.nav28-support-link:hover,
.nav28-group.is-active > .nav28-group-trigger,
.nav28-group.is-open > .nav28-group-trigger,
.nav28-support-link.is-active,
.nav28-mobile-group.is-active summary {
  background: var(--brand-peach-soft);
  color: var(--coral-dark);
}

.nav28-mobile-support {
  background: var(--brand-sage-soft);
  color: var(--sage);
}

.hero-intro,
.body-copy,
.feature-hero p,
.page-heading p {
  font-size: 15px;
}

.hero-copy h1 em {
  color: var(--coral-dark);
}

.home-hero {
  background:
    radial-gradient(ellipse at 8% 84%, rgba(255, 228, 196, .66) 0, transparent 58%),
    radial-gradient(ellipse at 92% 4%, rgba(135, 206, 235, .17) 0, transparent 42%),
    var(--cream);
}

.btn-primary:not([class*="v45-action-"]),
.quote-trigger,
.page-view .bg-sage-600:not([class*="v45-action-"]),
.modal-panel .bg-sage-600:not([class*="v45-action-"]),
.quote-drawer .bg-sage-600:not([class*="v45-action-"]) {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #3e2b26 !important;
}

.btn-primary:not([class*="v45-action-"]):hover,
.quote-trigger:hover,
.page-view .bg-sage-600:not([class*="v45-action-"]):hover,
.modal-panel .bg-sage-600:not([class*="v45-action-"]):hover,
.quote-drawer .bg-sage-600:not([class*="v45-action-"]):hover {
  background: #df806b !important;
  border-color: #df806b !important;
}

.btn-secondary:hover,
.nav28-item:hover,
.nav28-item:focus-visible,
.filter-chip:hover,
.gallery-tab.active,
.gallery-tab:hover {
  background: var(--brand-peach-soft);
}

.icon-box {
  background: var(--brand-peach-soft);
}

.category-card.blue .category-img,
.blue-hero {
  background: var(--brand-sky-soft);
}

.category-card.amber .category-img,
.amber-hero {
  background: var(--brand-peach-soft);
}

.partner-oem,
.closing-cta,
.coral-panel {
  background: linear-gradient(140deg, var(--brand-peach) 0, #fffaf5 64%);
}

.partner-distribution,
.support-strip,
.green-panel,
.sage-hero {
  background: linear-gradient(140deg, var(--brand-sage-soft) 0, #f9fbf7 64%);
}

.selection-band {
  background: linear-gradient(180deg, var(--brand-gray), #faf8f5);
}

.white-panel,
.product-card,
.mini-card,
.filter-panel,
.service-panel,
.category-card,
.scenario-stage {
  border-color: var(--line);
}

.process-grid p,
.mini-card p,
.field-note,
.demo-note,
.v16-start-meta,
.v23-route-card small,
.v23-sample-flow li span,
.v23-disclosure-action,
.ab-buy-footnote,
.ab-buy-source,
.product-mode,
.result-summary,
.request-preview {
  font-size: 11px !important;
  line-height: 1.65;
}

.form-field,
.scope-choice,
.filter-chip,
.search-field input,
.compact-select,
.compact-select select {
  font-size: 12px;
}

.form-field input,
.form-field select,
.form-field textarea,
.full-select {
  font-size: 13px;
}

.reference-tag {
  font-size: 10px;
  line-height: 1.35;
  color: var(--sage);
  background: var(--brand-sage-soft);
  border: 1px solid #ceded2;
  border-radius: 999px;
  padding: 4px 8px;
}

.reference-tag.status-documented {
  color: var(--blue);
  background: var(--brand-sky-soft);
  border-color: #cae5ef;
}

.reference-tag.status-reference {
  color: var(--amber);
  background: #faf4e8;
  border-color: #e8d8bd;
}

/* Module token bridges: use one ink, line, coral, and supporting green. */
.abb-simulator {
  --sim-ink: var(--ink);
  --sim-muted: var(--muted);
  --sim-coral: var(--coral);
  --sim-coral-dark: var(--coral-dark);
  --sim-green: var(--sage);
  --sim-line: var(--line);
}

.ab-buy-tool {
  --ab-ink: var(--ink);
  --ab-muted: var(--muted);
  --ab-coral: var(--coral);
  --ab-coral-dark: var(--coral-dark);
  --ab-green: var(--sage);
  --ab-line: var(--line);
}

.v28-pdp-root {
  --v28-green: var(--sage);
  --v28-green-soft: var(--brand-sage-soft);
  --v28-coral: var(--coral);
  --v28-coral-soft: var(--brand-peach-soft);
  --v28-ink: var(--ink);
  --v28-muted: var(--muted);
  --v28-line: var(--line);
}

.p1-business-page.p1-eb-page {
  --eb-coral: var(--coral);
  --eb-ink: var(--ink);
  --eb-muted: var(--muted);
  --eb-line: var(--line);
  --eb-cream: var(--cream);
  --eb-green: var(--sage);
}

.sp-page {
  --sp-ink: var(--ink);
  --sp-muted: var(--muted);
  --sp-line: var(--line);
  --sp-paper: var(--brand-gray);
  --sp-coral: var(--coral);
}

/* Footer contrast: official VI brown with readable supporting copy. */
.site-footer {
  background: var(--brand-brown);
  color: #fff9f3;
}

.footer-grid h3 {
  color: #ffffff;
  font-family: "Fredoka", "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 550;
}

.footer-brand p,
.footer-brand > .zh-sub,
.footer-grid > div > button,
.footer-bottom {
  color: #eee2dc;
}

.footer-brand p,
.footer-grid > div > button,
.footer-bottom {
  font-size: 12px;
}

.footer-grid > div > button:hover,
.footer-grid > div > button:focus-visible {
  color: var(--brand-peach);
}

.footer-brand img {
  background: #fffaf4;
}

html[dir="rtl"] .footer-grid > div > button,
html[dir="rtl"] .nav28-item,
html[dir="rtl"] .nav28-group-trigger,
html[dir="rtl"] .nav28-support-link {
  text-align: right;
}

@media (max-width: 1179px) {
  .nav28-language-slot .site-language-control select {
    min-width: 82px;
    max-width: 96px;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .nav28-language-slot .site-language-control select {
    min-width: 62px;
    max-width: 74px;
    font-size: 11px;
  }

  .hero-intro,
  .body-copy,
  .feature-hero p,
  .page-heading p {
    font-size: 14px;
  }

  .pdp-subnav > button,
  .scene-products small,
  .download-row small,
  .spec-note,
  .request-preview,
  .footer-bottom {
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}
