/* NTIS semantic tokens — LIGHT. A complete second system, not an inversion: white cards on a faint nili page, separation by hairline plus a nili-tinted lift, inks one step deeper than dark for AA on white, and pale 88% status tints. Same token list, same order as tokens/theme-dark.css. Apply with data-ntis-theme="light" on or on any wrapper. */ [data-ntis-theme="light"]{ color-scheme: light; /* Surfaces — white cards on a faint page; sunken is the tint below the page */ --surface-sunken: var(--luxe-blue-tints-94); --surface-page: var(--luxe-blue-tints-97); --surface-card: var(--white); --surface-card-hover: var(--white); --surface-muted: var(--luxe-blue-tints-94); --surface-raised: var(--white); --surface-chrome: var(--white); --surface-brand: var(--sky-tints-0); --surface-overlay: rgba(19, 24, 33, 0.56); --surface-glass: rgba(255, 255, 255, 0.80); /* Section bands — white ↔ the faint nili tint; no rules between them */ --surface-band: var(--white); --surface-band-alt: var(--luxe-blue-tints-94); /* Fills — nili ink at low alpha */ --fill-subtle: rgba(39, 49, 66, 0.04); --fill-hover: rgba(39, 49, 66, 0.06); --fill-pressed: rgba(39, 49, 66, 0.10); --fill-selected: rgba(30, 150, 211, 0.10); --fill-disabled: rgba(39, 49, 66, 0.06); --fill-on-solid-hover: rgba(255, 255, 255, 0.14); /* Text */ --text-strong: var(--luxe-blue-shades-75); --text-body: var(--luxe-blue-shades-50); --text-muted: var(--neutral-tints-0); --text-subtle: var(--neutral-tints-12); --text-disabled: var(--neutral-tints-50); --text-on-brand: var(--white); --text-on-action: var(--white); --text-link: var(--sky-shades-25); --text-link-hover: var(--sky-shades-50); /* Borders */ --border-subtle: var(--luxe-blue-tints-88); --border-default: var(--luxe-blue-tints-75); --border-strong: var(--luxe-blue-tints-50); --border-focus: var(--sky-tints-0); --border-selected: var(--sky-tints-0); /* Controls */ --control-bg: var(--white); --control-bg-disabled: var(--luxe-blue-tints-94); --control-border: var(--luxe-blue-tints-50); --control-border-hover: var(--luxe-blue-tints-25); --control-ink: var(--luxe-blue-shades-75); --control-placeholder: var(--neutral-tints-25); --control-checked: var(--sky-tints-0); --control-checked-hover: var(--sky-shades-25); --control-check-ink: var(--white); --switch-track: var(--neutral-tints-50); --switch-knob: var(--white); --control-border-invalid: var(--wine-tints-0); --control-border-warning: var(--warning-tints-0); --control-border-success: var(--green-tints-0); /* Brand roles */ --brand-primary: var(--sky-tints-0); --brand-primary-hover: var(--sky-shades-25); --brand-primary-active: var(--sky-shades-50); --brand-primary-soft: var(--sky-tints-88); --brand-primary-ink: var(--sky-shades-25); --brand-secondary: var(--luxe-blue-tints-0); --brand-secondary-hover: var(--luxe-blue-shades-25); --brand-secondary-active: var(--luxe-blue-shades-50); --brand-secondary-soft: var(--luxe-blue-tints-88); --brand-secondary-ink: var(--luxe-blue-tints-0); --brand-tertiary: var(--wine-tints-0); --brand-tertiary-hover: var(--wine-shades-25); --brand-tertiary-active: var(--wine-shades-50); --brand-tertiary-soft: var(--wine-tints-88); --brand-tertiary-ink: var(--wine-tints-0); --brand-neutral: var(--neutral-tints-0); /* Status — ink is the deepest step that still reads as the hue at ≥4.5:1 on its 88% tint */ --status-info-fg: var(--sky-shades-25); --status-info-bg: var(--sky-tints-88); --status-info-border: var(--sky-tints-75); --status-info-solid: var(--sky-tints-0); --status-success-fg: var(--green-shades-40); --status-success-bg: var(--green-tints-88); --status-success-border: var(--green-tints-75); --status-success-solid: var(--green-tints-0); --status-warning-fg: var(--warning-shades-50); --status-warning-bg: var(--warning-tints-88); --status-warning-border: var(--warning-tints-75); --status-warning-solid: var(--warning-tints-0); --status-danger-fg: var(--wine-tints-0); --status-danger-bg: var(--wine-tints-88); --status-danger-border: var(--wine-tints-75); --status-danger-solid: var(--wine-tints-0); --status-neutral-fg: var(--neutral-shades-25); --status-neutral-bg: var(--neutral-tints-88); --status-neutral-border: var(--neutral-tints-75); --status-neutral-solid: var(--neutral-tints-25); /* Severity */ --sev-critical: var(--wine-tints-0); --sev-high: var(--warning-shades-25); --sev-medium: var(--warning-tints-0); --sev-low: var(--sky-tints-0); --sev-info: var(--neutral-tints-25); /* Elevation — tinted with the nili shade, never neutral black. Cards are FLAT at rest (hairline only); interactive cards lift on hover; floating layers cast. */ --shadow-rgb: 39, 49, 66; /* @kind other */ --elev-0: 0 0 #0000; --elev-1: 0 1px 2px rgba(var(--shadow-rgb), 0.06); --elev-2: 0 1px 3px rgba(var(--shadow-rgb), 0.08), 0 4px 12px rgba(var(--shadow-rgb), 0.06); --elev-3: 0 2px 6px rgba(var(--shadow-rgb), 0.10), 0 12px 28px rgba(var(--shadow-rgb), 0.10); --elev-4: 0 8px 24px rgba(var(--shadow-rgb), 0.14), 0 32px 64px rgba(var(--shadow-rgb), 0.16); --elev-inset: inset 0 1px 2px rgba(var(--shadow-rgb), 0.10); --card-shadow: var(--elev-0); --card-shadow-hover: var(--elev-3); --focus-ring: 0 0 0 3px rgba(30, 150, 211, 0.35); --focus-ring-danger: 0 0 0 3px rgba(129, 24, 41, 0.30); /* Grounds & theme-conditional display */ --gradient-hero: var(--mesh-paper); /* @kind color */ --gradient-hero-mirror: var(--mesh-paper-mirror); /* @kind color */ --show-in-dark: none; /* @kind other */ --show-in-light: block; /* @kind other */ --selection-bg: var(--sky-tints-50); --selection-ink: var(--luxe-blue-shades-75); /* Page banners */ --banner-neutral-bg: var(--luxe-blue-shades-75); --banner-info-bg: var(--sky-shades-50); --banner-critical-bg: var(--wine-tints-0); /* Charts — pie order: navy, light navy, sky, light sky, green, light green, nili, light nili, then neutrals */ --chart-1: var(--sky-shades-50); --chart-2: var(--sky-shades-25); --chart-3: var(--sky-tints-0); --chart-4: var(--sky-tints-50); --chart-5: var(--green-tints-0); --chart-6: var(--green-tints-50); --chart-7: var(--luxe-blue-tints-0); --chart-8: var(--luxe-blue-tints-25); --chart-9: var(--neutral-tints-0); --chart-10: var(--neutral-tints-25); --chart-grid: var(--luxe-blue-tints-88); --chart-axis: var(--neutral-tints-12); --chart-track: var(--luxe-blue-tints-88); --chart-area-opacity: 0.16; /* @kind other */ --chart-tooltip-bg: var(--luxe-blue-shades-75); --chart-tooltip-ink: var(--white); --chart-tooltip-muted: var(--luxe-blue-tints-50); --chart-tooltip-border: transparent; --chart-tooltip-divider: rgba(255, 255, 255, 0.14); }