/* Inox Tan Son: deep navy, orange and white from the supplied 09/10/2026 logo.
   Flat interface colors: navy var(--its-primary), orange var(--its-accent). Loaded last for a consistent brand.
   Risk levels, warning notices, TEST labels and success/error badges retain
   their independent semantic colors from the application stylesheets. */
:root {
  --brand-blue: var(--its-primary);
  --brand-blue-hover: var(--its-primary-hover);
  --brand-deep: var(--its-primary);
  --brand-orange: var(--its-accent);
  --brand-orange-ink: var(--its-accent-ink);
  --brand-pale: var(--its-surface-soft);
  --brand-border: var(--its-line-strong);
  --brand-on-dark: var(--its-on-dark);
  --navy: var(--brand-deep);
  --deep: var(--brand-deep);
  --teal: var(--brand-blue);
  --gold: var(--brand-orange);
  --ink: var(--its-ink);
  --muted: var(--its-muted);
  --line: var(--its-line);
  --bg: var(--its-background);
  --surface-shadow: 0 3px 16px rgb(22 48 79 / 0.024);
}

/* Navigation and identity */
.sidebar {
  background: var(--brand-deep);
  scrollbar-color: var(--its-muted) transparent;
  box-shadow: 8px 0 36px rgb(22 48 79 / 0.078);
}
.brand-lockup { background: var(--its-surface); box-shadow: 0 2px 8px rgb(22 48 79 / 0.071); }
.brand-slogan { color: var(--brand-orange-ink); }
.sidebar .brand-product small, .workspace-label, .mini-label,
.sidebar nav a, .nav-group, .v-nav-detail summary,
.sidebar .side-bottom small { color: var(--brand-on-dark); }
.side-bottom p { color: var(--its-surface-soft); }
.side-bottom small { border-color: rgb(255 255 255 / 0.141); }
.side-bottom a { color: var(--its-accent-light); }
#nav > a.active, .sidebar nav a.active {
  background: rgb(255 255 255 / 0.071);
  color: var(--its-surface);
  box-shadow: inset 3px 0 var(--brand-orange);
}
#nav a:hover { background: rgb(255 255 255 / 0.078); color: var(--its-surface); }
.its-current-sub {
  color: var(--its-accent-light) !important;
  background: rgb(255 255 255 / 0.063);
}
.mark {
  border-color: rgb(246 140 31 / 0.439);
  background: rgb(246 140 31 / 0.063);
  color: var(--brand-orange);
}
.topbar { background: var(--its-surface); }
.topbar #global-query { background: var(--its-background); border-color: var(--line); }
.avatar, .row-symbol, .letter, .icon-button, .close {
  background: var(--brand-pale);
  color: var(--brand-blue);
}
.separator { color: var(--its-muted); }
.topbar .mobile-brand, .footer-info strong { color: var(--brand-deep); }
.footer-info, footer { color: var(--muted); }
.site-footer { background: var(--its-surface); }

/* Actions and accessible keyboard focus */
.button, #global-search button {
  background: var(--brand-blue);
  color: var(--its-surface);
}
.button:hover, #global-search button:hover { background: var(--brand-blue-hover); }
.button.secondary {
  background: var(--its-surface);
  border-color: var(--brand-border);
  color: var(--brand-blue);
}
.button.secondary:hover { background: var(--brand-pale); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
.v-nav-detail summary:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}
.sidebar :focus-visible, .cx-hero :focus-visible, .cycle :focus-visible,
.pilot-strip :focus-visible, .v-pilot :focus-visible,
.module-intro :focus-visible, .gate-feedback :focus-visible {
  outline-color: var(--its-accent-light);
}
.v-form input:focus, .v-form textarea:focus, .v-form select:focus,
.v-control-row select:focus, .v-control-row textarea:focus {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-blue); }

/* Navy home entry cards: clear reading hierarchy and orange brand accents. */
.cx-entry-grid > .its-entry {
  background: var(--brand-deep);
  border-color: var(--its-ink);
  border-top: 3px solid var(--brand-orange);
  color: var(--its-surface);
  box-shadow: 0 6px 20px rgb(22 48 79 / 0.094);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cx-entry-grid > .its-entry:hover,
.cx-entry-grid > .its-entry:focus-visible {
  background: var(--brand-blue-hover);
  border-color: var(--brand-orange);
  box-shadow: 0 10px 28px rgb(22 48 79 / 0.149);
}
.cx-entry-grid > .its-entry h2 { color: var(--its-surface); }
.cx-entry-grid > .its-entry .its-entry-label { color: var(--brand-orange); }
.cx-entry-grid > .its-entry p { color: var(--its-surface-soft); }
.cx-entry-grid > .its-entry .its-entry-detail { color: var(--brand-on-dark); }
.cx-entry-grid > .its-entry strong {
  color: var(--its-accent-light);
  border-bottom-color: var(--brand-orange);
}
@media (prefers-reduced-motion: reduce) {
  .cx-entry-grid > .its-entry { transition: none; }
}
.pagehead h1, .panel h2, .panel h3, .module-card h3, .portal-card h3,
.action-card h3, .its-section-card h3, .guide h2, .guide h3,
.its-source-content h2, .its-source-content h3, #detail-title {
  color: var(--brand-blue);
}
.portal-card { border-top-color: var(--brand-blue); }
.portal-card p { color: var(--muted); }
.portal-card:hover, .module-card:hover, .action-card:hover, .gate-card:hover {
  border-color: var(--brand-border);
  background: var(--its-surface);
  box-shadow: 0 7px 22px rgb(22 48 79 / 0.031);
}
#main > .pagehead + .panel:has(a[href="#work"]) .portal-card {
  background: var(--its-background);
  border-left-color: var(--brand-border);
}
#main > .pagehead + .panel a[href="#work"] {
  border-left-color: var(--brand-blue);
  background: var(--brand-pale);
}
.its-quick a { background: var(--its-background); color: var(--brand-blue); }
.its-quick a:hover { background: var(--brand-pale); border-color: var(--brand-border); }
.its-section-no, .principle b { color: var(--brand-orange-ink); }
.step-n { border-color: var(--brand-border); }
.weight-bar span { background: var(--brand-blue); }
.horizontal-line { background: rgb(255 255 255 / 0.145); }
.weight-bar { background: var(--its-surface-soft); }
.featured .metric-title, .featured .metric-note, .module-intro p,
.cycle p, .pilot-strip p, .v-pilot p, .v-gate-result small {
  color: var(--brand-on-dark);
}
.pilot-strip .button, .v-pilot .button {
  background: var(--brand-orange);
  color: var(--brand-deep);
}
.pilot-strip .button:hover, .v-pilot .button:hover { background: var(--its-accent-light); }
.v-pilot, .v-gate-result, .v-door:first-child {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}
.v-gate-result { border-left-color: var(--brand-orange); }
.v-gate-result strong, .v-door:first-child .v-door-n { color: var(--its-accent-light); }
.v-door { color: var(--ink); border-top-color: var(--brand-orange); }
.v-door:first-child { color: var(--its-surface); border-top-color: var(--brand-orange); }
.v-door-n { color: var(--brand-orange-ink); }
.v-home-note, .v-home-note strong { color: var(--ink); }

/* Reading surfaces, data tables and neutral informational panels */
.ex-table th, .control-table th, .module-table th,
.cx-source-content th, .its-source-content tr:first-child, .guide tr:first-child {
  background: var(--brand-pale);
  color: var(--brand-deep);
}
.ex-table tbody tr:hover, .control-table tbody tr:hover { background: var(--its-surface); }
.panel > h2, .control-table td, .row-list, .module-table td { border-color: var(--line); }
.notice:not(.alert) {
  background: var(--brand-pale);
  border-left-color: var(--brand-blue);
  color: var(--its-ink);
}
.notice:not(.alert) strong { color: var(--brand-deep); }
.guardrail { background: var(--brand-pale); color: var(--its-ink); }
.guardrail .label { color: var(--brand-blue) !important; }
.guardrail h3 { color: var(--brand-deep); }
.guide aside, .its-source-note, .gate-keyline {
  background: var(--its-background);
  color: var(--ink);
}
.guide aside, .its-source-note { border-left-color: var(--brand-blue); }
.its-toc { background: var(--its-background); }
.its-toc button { color: var(--its-ink); }
.flow-small { color: var(--muted); }
.flow-small span, .allocation > div, .empty-queue, .ex-flow > div,
.v-files a, .v-architecture li { background: var(--its-background); }
.v-architecture li { border-left-color: var(--brand-orange); }
.v-architecture li:before { color: var(--brand-blue); }
.v-empty { background: var(--its-background); border-color: var(--brand-border); }
.v-empty p, .v-control-row p, .v-files small, .v-upload,
.v-id, .fields dt, .v-form label, .v-control-row label, .ex-form-grid label {
  color: var(--muted);
}
.v-form input, .v-form textarea, .v-form select,
.v-control-row select, .v-control-row textarea, .v-search input {
  color: var(--ink);
  border-color: var(--brand-border);
}
.its-empty { border-color: var(--brand-border); }
.its-empty-icon { color: var(--brand-blue); }
dialog { background: var(--its-surface); border-color: var(--line); box-shadow: 0 24px 90px rgb(22 48 79 / 0.251); }
dialog::backdrop { background: rgb(22 48 79 / 0.502); }

/* Customer experience shares the same brand language */
.cx-hero {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}
.cx-hero h1 { color: var(--its-surface); }
.cx-hero h1 em, .cx-hero .eyebrow { color: var(--its-accent-light); }
.cx-hero-copy > p, .cx-promise small { color: var(--brand-on-dark); }
.cx-hero .button {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--brand-deep);
}
.cx-hero .button:hover { background: var(--its-accent-light); border-color: var(--its-accent-light); }
.cx-light-link { color: var(--its-surface); }
.cx-promise-caption, .cx-promise > div > span { color: var(--its-accent-light); }
.cx-system-path a[aria-current], .cx-system-path a:hover { background: var(--brand-pale); }
.cx-system-path a > span { color: var(--brand-orange-ink); }
.cx-system-path strong { color: var(--brand-blue); }
.cx-value { background: var(--its-background); border-top-color: var(--brand-orange); }
.cx-value h3, .cx-mini h3, .cx-touchpoint summary strong,
.cx-kpi summary > strong, .cx-customer-need, .cx-kpi-target {
  color: var(--brand-blue);
}
.cx-no, .cx-steps li:before { color: var(--brand-orange-ink); }
.cx-callout, .cx-source-content blockquote {
  background: var(--its-accent-soft);
  border-left-color: var(--brand-orange);
}
.cx-point-id { background: var(--brand-pale); color: var(--brand-blue); }
.cx-point-body, .cx-facts > div, .cx-steps li { border-color: var(--line); }
.cx-point-links { background: var(--its-background); }
.cx-point-links a, .cx-mini a { color: var(--brand-blue); }
.cx-touchpoint[open], .cx-kpi[open] { border-color: var(--brand-border); }
.cx-context { background: var(--brand-pale); border-color: var(--brand-border); }
.cx-context .eyebrow, .cx-context > a { color: var(--brand-blue); }
.cx-context p { color: var(--its-ink); }

/* Preserve the stop signal on control panels. */
.gate-stop h2 { color: var(--red); }

/* Keep printed material legible without relying on background printing. */
@media print {
  .cx-entry-grid > .its-entry {
    background: var(--its-surface);
    color: var(--ink);
    border-color: var(--line);
    border-top-color: var(--brand-blue);
    box-shadow: none;
  }
  .cx-entry-grid > .its-entry h2,
  .cx-entry-grid > .its-entry .its-entry-label,
  .cx-entry-grid > .its-entry p,
  .cx-entry-grid > .its-entry .its-entry-detail,
  .cx-entry-grid > .its-entry strong { color: var(--ink); }
  .cx-hero, .module-intro, .cycle, .pilot-strip, .v-pilot,
  .metric.featured, .gate-feedback, .v-gate-result {
    background: var(--its-surface);
    color: var(--ink);
    border-color: var(--line);
  }
  .cx-hero h1, .cx-hero h1 em, .cx-hero p, .cx-hero .eyebrow,
  .cx-promise strong, .cx-promise small, .cx-promise-caption,
  .cx-promise > div > span, .cx-light-link, .module-intro p,
  .module-intro .big, .cycle p, .cycle small, .pilot-strip p,
  .v-pilot p, .featured .metric-title, .featured .metric-value,
  .featured .metric-note, .gate-feedback strong,
  .v-gate-result strong, .v-gate-result small { color: var(--ink); }
}