:root {
    --rtu-navy-950: #050d1f;
    --rtu-navy-900: #081735;
    --rtu-navy-800: #0b1d3e;
    --rtu-navy-700: #0d2348;
    --rtu-navy-600: #122b54;
    --rtu-brand-blue: #5a9cff;
    --rtu-brand-blue-strong: #3f83f8;
    --rtu-brand-cyan: #55d8ff;
    --rtu-brand-text: #f5f8ff;
    --rtu-brand-text-muted: #a7b6ce;
    --rtu-brand-success: #43d29a;
    --rtu-brand-warning: #ffbd59;
    --rtu-brand-danger: #ff7280;
    --rtu-color-primary: #0e4fa8;
    --rtu-color-primary-strong: #1e6fe8;
    --rtu-color-secondary: #3f83f8;
    --rtu-color-on-primary: #ffffff;
    --rtu-color-on-secondary: #ffffff;
    --rtu-color-success: #147a59;
    --rtu-color-on-success: #ffffff;
    --rtu-color-warning: #9a5b00;
    --rtu-color-on-warning: #ffffff;
    --rtu-color-error: #b72e3e;
    --rtu-color-on-error: #ffffff;
    --rtu-color-info: #0e4fa8;
    --rtu-color-on-info: #ffffff;
    --rtu-color-focus: #1e6fe8;
    --rtu-color-text: #16325c;
    --rtu-color-text-muted: #4a6089;
    --rtu-color-surface: #ffffff;
    --rtu-color-surface-subtle: #f7faff;
    --rtu-color-background: #eef5ff;
    --rtu-color-border: #d9e6fb;
    --rtu-color-disabled-text: #566782;
    --rtu-color-disabled-background: #e3eaf4;
    --rtu-space-1: 0.25rem;
    --rtu-space-2: 0.5rem;
    --rtu-space-3: 0.75rem;
    --rtu-space-4: 1rem;
    --rtu-space-6: 1.5rem;
    --rtu-space-8: 2rem;
    --rtu-space-12: 3rem;
    --rtu-space-5: 1.25rem;
    --rtu-space-10: 2.5rem;
    --rtu-space-16: 4rem;
    --rtu-radius-sm: 0.5rem;
    --rtu-radius-md: 0.75rem;
    --rtu-radius-lg: 1.25rem;
    --rtu-radius-card: 1rem;
    --rtu-radius-panel: 1.125rem;
    --rtu-radius-pill: 999px;
    --rtu-control-min-height: 2.75rem;
    --rtu-touch-target-min: 2.75rem;
    --rtu-appbar-height: 4rem;
    --rtu-appbar-height-mobile: 3.625rem;
    --rtu-drawer-width-wide: 15.5rem;
    --rtu-drawer-width-compact: 14rem;
    --rtu-drawer-width-rail: 4.5rem;
    --rtu-mobile-nav-height: 4.5rem;
    --rtu-safe-top: env(safe-area-inset-top, 0px);
    --rtu-safe-right: env(safe-area-inset-right, 0px);
    --rtu-safe-bottom: env(safe-area-inset-bottom, 0px);
    --rtu-safe-left: env(safe-area-inset-left, 0px);
    /*
       Canonical inclusive viewport maxima. CSS custom properties cannot be
       interpolated into @media conditions. Authenticated responsive rules are
       centralized in responsive.css and responsive.js; page/component styles
       must not repeat these literals.
    */
    --rtu-breakpoint-phone-max: 767px;
    --rtu-breakpoint-compact-max: 1199px;
    --rtu-elevation-card: 0 1rem 2.5rem rgba(5, 14, 33, 0.1);
    --rtu-elevation-popover: 0 1.25rem 3.5rem rgba(5, 14, 33, 0.18);
    --rtu-elevation-dialog: 0 2rem 5rem rgba(5, 14, 33, 0.24);
}

.mud-theme-dark {
    --rtu-color-primary: var(--rtu-brand-blue);
    --rtu-color-primary-strong: var(--rtu-brand-blue-strong);
    --rtu-color-secondary: var(--rtu-brand-cyan);
    --rtu-color-on-primary: var(--rtu-navy-950);
    --rtu-color-on-secondary: var(--rtu-navy-950);
    --rtu-color-success: var(--rtu-brand-success);
    --rtu-color-on-success: var(--rtu-navy-950);
    --rtu-color-warning: var(--rtu-brand-warning);
    --rtu-color-on-warning: var(--rtu-navy-950);
    --rtu-color-error: var(--rtu-brand-danger);
    --rtu-color-on-error: var(--rtu-navy-950);
    --rtu-color-info: var(--rtu-brand-cyan);
    --rtu-color-on-info: var(--rtu-navy-950);
    --rtu-color-focus: var(--rtu-brand-cyan);
    --rtu-color-text: var(--rtu-brand-text);
    --rtu-color-text-muted: var(--rtu-brand-text-muted);
    --rtu-color-surface: var(--rtu-navy-800);
    --rtu-color-surface-subtle: var(--rtu-navy-900);
    --rtu-color-background: var(--rtu-navy-950);
    --rtu-color-border: rgba(132, 171, 224, 0.24);
    --rtu-color-disabled-text: #a9b8cb;
    --rtu-color-disabled-background: #26344a;
    --rtu-elevation-card: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
    --rtu-elevation-popover: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.36);
    --rtu-elevation-dialog: 0 2rem 5rem rgba(0, 0, 0, 0.46);
}

@media (forced-colors: active) {
    :where(a, button, [role="button"], input, select, textarea, .mud-button-root, .mud-icon-button):focus-visible {
        outline-color: Highlight;
    }
}

:where(a, button, [role="button"], input, select, textarea, .mud-button-root, .mud-icon-button):focus-visible {
    outline: 3px solid var(--rtu-color-focus);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}