/* NTIS high contrast — the fourth and fifth appearance of every theme. Mirrors iOS "Increase Contrast": the same semantic token list, pushed to AAA-leaning inks, 3:1+ hairlines and a solid focus ring, and — the one brand concession — the button gradient moves to its deep stops so white ink clears 4.5:1. Surfaces, spacing, radii and motion do not change. Triggers (either): 1. the OS: @media (prefers-contrast: more) 2. opt-in: data-ntis-contrast="high" on , or on an element that also carries data-ntis-theme. An unthemed wrapper only affects the themed islands inside it — it never mixes dark and light values. Dark and light declare the IDENTICAL list, in the same order (checked). */ @media (prefers-contrast: more){ :root,[data-ntis-theme="dark"]{ --fill-hover: rgba(255, 255, 255, 0.14); --fill-pressed: rgba(255, 255, 255, 0.20); --fill-selected: rgba(30, 150, 211, 0.32); --text-strong: var(--white); --text-body: var(--luxe-blue-tints-88); --text-muted: var(--luxe-blue-tints-75); --text-subtle: var(--luxe-blue-tints-50); --text-disabled: var(--luxe-blue-tints-25); --text-link: var(--sky-tints-50); --text-link-hover: var(--sky-tints-75); --border-subtle: rgba(255, 255, 255, 0.24); --border-default: rgba(255, 255, 255, 0.42); --border-strong: rgba(255, 255, 255, 0.66); --border-focus: var(--white); --border-selected: var(--sky-tints-50); --control-border: rgba(255, 255, 255, 0.58); --control-border-hover: rgba(255, 255, 255, 0.82); --control-placeholder: var(--luxe-blue-tints-50); --control-checked: var(--sky-shades-25); --control-checked-hover: var(--sky-shades-50); --control-border-invalid: var(--wine-tints-75); --control-border-warning: var(--warning-tints-50); --control-border-success: var(--green-tints-50); --switch-track: rgba(255, 255, 255, 0.38); --brand-primary: var(--sky-shades-25); --brand-primary-hover: var(--sky-shades-50); --brand-primary-active: var(--sky-shades-75); --brand-primary-ink: var(--sky-tints-50); --brand-secondary-ink: var(--luxe-blue-tints-88); --brand-tertiary-ink: var(--wine-tints-75); --status-info-fg: var(--sky-tints-75); --status-info-border: var(--sky-tints-50); --status-success-fg: var(--green-tints-75); --status-success-border: var(--green-tints-50); --status-warning-fg: var(--warning-tints-75); --status-warning-border: var(--warning-tints-50); --status-danger-fg: var(--wine-tints-75); --status-danger-border: var(--wine-tints-50); --status-neutral-fg: var(--neutral-tints-88); --status-neutral-border: rgba(255, 255, 255, 0.42); --chart-grid: rgba(255, 255, 255, 0.16); --chart-axis: var(--luxe-blue-tints-50); --focus-ring: 0 0 0 2px var(--luxe-blue-shades-80), 0 0 0 5px var(--white); --focus-ring-danger: 0 0 0 2px var(--luxe-blue-shades-80), 0 0 0 5px var(--wine-tints-75); --gradient-button: linear-gradient(90deg, var(--sky-shades-25) 0%, var(--green-shades-40) 100%); /* @kind color */ --gradient-button-hover: linear-gradient(90deg, var(--sky-shades-50) 0%, var(--green-shades-50) 100%); /* @kind color */ } [data-ntis-theme="light"]{ --fill-hover: rgba(39, 49, 66, 0.10); --fill-pressed: rgba(39, 49, 66, 0.16); --fill-selected: rgba(30, 150, 211, 0.18); --text-strong: var(--luxe-blue-shades-85); --text-body: var(--luxe-blue-shades-75); --text-muted: var(--luxe-blue-shades-50); --text-subtle: var(--neutral-shades-25); --text-disabled: var(--neutral-tints-12); --text-link: var(--sky-shades-50); --text-link-hover: var(--sky-shades-75); --border-subtle: var(--luxe-blue-tints-50); --border-default: var(--luxe-blue-tints-25); --border-strong: var(--luxe-blue-tints-0); --border-focus: var(--sky-shades-50); --border-selected: var(--sky-shades-25); --control-border: var(--luxe-blue-tints-0); --control-border-hover: var(--luxe-blue-shades-25); --control-placeholder: var(--neutral-tints-0); --control-checked: var(--sky-shades-25); --control-checked-hover: var(--sky-shades-50); --control-border-invalid: var(--wine-shades-25); --control-border-warning: var(--warning-shades-25); --control-border-success: var(--green-shades-40); --switch-track: var(--neutral-tints-0); --brand-primary: var(--sky-shades-25); --brand-primary-hover: var(--sky-shades-50); --brand-primary-active: var(--sky-shades-75); --brand-primary-ink: var(--sky-shades-50); --brand-secondary-ink: var(--luxe-blue-shades-25); --brand-tertiary-ink: var(--wine-shades-25); --status-info-fg: var(--sky-shades-50); --status-info-border: var(--sky-tints-0); --status-success-fg: var(--green-shades-50); --status-success-border: var(--green-tints-0); --status-warning-fg: var(--warning-shades-50); --status-warning-border: var(--warning-tints-0); --status-danger-fg: var(--wine-shades-25); --status-danger-border: var(--wine-tints-0); --status-neutral-fg: var(--neutral-shades-50); --status-neutral-border: var(--neutral-tints-12); --chart-grid: var(--luxe-blue-tints-75); --chart-axis: var(--neutral-shades-25); --focus-ring: 0 0 0 2px var(--white), 0 0 0 5px var(--sky-shades-50); --focus-ring-danger: 0 0 0 2px var(--white), 0 0 0 5px var(--wine-shades-25); --gradient-button: linear-gradient(90deg, var(--sky-shades-25) 0%, var(--green-shades-40) 100%); /* @kind color */ --gradient-button-hover: linear-gradient(90deg, var(--sky-shades-50) 0%, var(--green-shades-50) 100%); /* @kind color */ } } :root[data-ntis-contrast="high"]:not([data-ntis-theme="light"]), [data-ntis-contrast="high"][data-ntis-theme="dark"], [data-ntis-contrast="high"] [data-ntis-theme="dark"]{ --fill-hover: rgba(255, 255, 255, 0.14); --fill-pressed: rgba(255, 255, 255, 0.20); --fill-selected: rgba(30, 150, 211, 0.32); --text-strong: var(--white); --text-body: var(--luxe-blue-tints-88); --text-muted: var(--luxe-blue-tints-75); --text-subtle: var(--luxe-blue-tints-50); --text-disabled: var(--luxe-blue-tints-25); --text-link: var(--sky-tints-50); --text-link-hover: var(--sky-tints-75); --border-subtle: rgba(255, 255, 255, 0.24); --border-default: rgba(255, 255, 255, 0.42); --border-strong: rgba(255, 255, 255, 0.66); --border-focus: var(--white); --border-selected: var(--sky-tints-50); --control-border: rgba(255, 255, 255, 0.58); --control-border-hover: rgba(255, 255, 255, 0.82); --control-placeholder: var(--luxe-blue-tints-50); --control-checked: var(--sky-shades-25); --control-checked-hover: var(--sky-shades-50); --control-border-invalid: var(--wine-tints-75); --control-border-warning: var(--warning-tints-50); --control-border-success: var(--green-tints-50); --switch-track: rgba(255, 255, 255, 0.38); --brand-primary: var(--sky-shades-25); --brand-primary-hover: var(--sky-shades-50); --brand-primary-active: var(--sky-shades-75); --brand-primary-ink: var(--sky-tints-50); --brand-secondary-ink: var(--luxe-blue-tints-88); --brand-tertiary-ink: var(--wine-tints-75); --status-info-fg: var(--sky-tints-75); --status-info-border: var(--sky-tints-50); --status-success-fg: var(--green-tints-75); --status-success-border: var(--green-tints-50); --status-warning-fg: var(--warning-tints-75); --status-warning-border: var(--warning-tints-50); --status-danger-fg: var(--wine-tints-75); --status-danger-border: var(--wine-tints-50); --status-neutral-fg: var(--neutral-tints-88); --status-neutral-border: rgba(255, 255, 255, 0.42); --chart-grid: rgba(255, 255, 255, 0.16); --chart-axis: var(--luxe-blue-tints-50); --focus-ring: 0 0 0 2px var(--luxe-blue-shades-80), 0 0 0 5px var(--white); --focus-ring-danger: 0 0 0 2px var(--luxe-blue-shades-80), 0 0 0 5px var(--wine-tints-75); --gradient-button: linear-gradient(90deg, var(--sky-shades-25) 0%, var(--green-shades-40) 100%); /* @kind color */ --gradient-button-hover: linear-gradient(90deg, var(--sky-shades-50) 0%, var(--green-shades-50) 100%); /* @kind color */ } [data-ntis-contrast="high"][data-ntis-theme="light"], [data-ntis-contrast="high"] [data-ntis-theme="light"]{ --fill-hover: rgba(39, 49, 66, 0.10); --fill-pressed: rgba(39, 49, 66, 0.16); --fill-selected: rgba(30, 150, 211, 0.18); --text-strong: var(--luxe-blue-shades-85); --text-body: var(--luxe-blue-shades-75); --text-muted: var(--luxe-blue-shades-50); --text-subtle: var(--neutral-shades-25); --text-disabled: var(--neutral-tints-12); --text-link: var(--sky-shades-50); --text-link-hover: var(--sky-shades-75); --border-subtle: var(--luxe-blue-tints-50); --border-default: var(--luxe-blue-tints-25); --border-strong: var(--luxe-blue-tints-0); --border-focus: var(--sky-shades-50); --border-selected: var(--sky-shades-25); --control-border: var(--luxe-blue-tints-0); --control-border-hover: var(--luxe-blue-shades-25); --control-placeholder: var(--neutral-tints-0); --control-checked: var(--sky-shades-25); --control-checked-hover: var(--sky-shades-50); --control-border-invalid: var(--wine-shades-25); --control-border-warning: var(--warning-shades-25); --control-border-success: var(--green-shades-40); --switch-track: var(--neutral-tints-0); --brand-primary: var(--sky-shades-25); --brand-primary-hover: var(--sky-shades-50); --brand-primary-active: var(--sky-shades-75); --brand-primary-ink: var(--sky-shades-50); --brand-secondary-ink: var(--luxe-blue-shades-25); --brand-tertiary-ink: var(--wine-shades-25); --status-info-fg: var(--sky-shades-50); --status-info-border: var(--sky-tints-0); --status-success-fg: var(--green-shades-50); --status-success-border: var(--green-tints-0); --status-warning-fg: var(--warning-shades-50); --status-warning-border: var(--warning-tints-0); --status-danger-fg: var(--wine-shades-25); --status-danger-border: var(--wine-tints-0); --status-neutral-fg: var(--neutral-shades-50); --status-neutral-border: var(--neutral-tints-12); --chart-grid: var(--luxe-blue-tints-75); --chart-axis: var(--neutral-shades-25); --focus-ring: 0 0 0 2px var(--white), 0 0 0 5px var(--sky-shades-50); --focus-ring-danger: 0 0 0 2px var(--white), 0 0 0 5px var(--wine-shades-25); --gradient-button: linear-gradient(90deg, var(--sky-shades-25) 0%, var(--green-shades-40) 100%); /* @kind color */ --gradient-button-hover: linear-gradient(90deg, var(--sky-shades-50) 0%, var(--green-shades-50) 100%); /* @kind color */ } /* Windows High Contrast / forced colours: the browser repaints everything in system colours and drops box-shadows, so focus rings and filled states would vanish. Restore them with outlines and system-colour borders. */ @media (forced-colors: active){ .ntis-btn,.ntis-iconbtn--outline,.ntis-iconbtn--solid,.ntis-tag,.ntis-badge,.ntis-pagination__page[aria-current="page"],.ntis-tabs--pills .ntis-tabs__tab[aria-selected="true"]{border:1px solid ButtonText} .ntis-btn--link{border:0} .ntis-card,.ntis-chartcard,.ntis-table-wrap,.ntis-modal,.ntis-toast,.ntis-alert,.ntis-filterbar,.ntis-banner{border:1px solid CanvasText} .ntis-switch__track{border:1px solid ButtonText} .ntis-switch__input:checked+.ntis-switch__track,.ntis-choice__input:checked+.ntis-choice__box,.ntis-tabs__tab[aria-selected="true"]::after,.ntis-sidebar__item--active::before,.ntis-card--ruled::before,.ntis-loading__fill{background:Highlight;border-color:Highlight} :focus-visible,.is-focus{outline:2px solid Highlight !important;outline-offset:2px !important} }