/*
 * SIS kit design tokens (enrollment redesign, 2026-09-28).
 * Source: design canvas "SIS Enrollment Redesign", page p2 (docs/superpowers/specs/2026-09-28-sis-enrollment-redesign-design.md §4).
 * Only Sis* components (Components/Shared/SisKit) and the redesigned enrollment pages read these. Components use
 * var(--sis-*) in their .razor.css; never hard-code a hex that has a token here.
 */
:root {
    /* Text */
    --sis-text: #2D505B;
    --sis-text-strong: #1F3A42;
    --sis-text-secondary: #5B7280;
    --sis-text-label: #4A6470;
    --sis-text-body: #3F5C67;
    --sis-text-muted: #6B7C88;
    --sis-text-muted-strong: #657885; /* muted text that must clear 4.5:1 on white (upcoming step labels) */
    --sis-text-on-count: #546C79; /* tab count on its --sis-surface-count pill, 4.7:1 */
    --sis-text-disabled: #8592A3;
    --sis-icon-muted: #4F6B75; /* search icon, clear glyph */
    --sis-text-subtitle: #4F6B75; /* TermSelect header subtitle */
    --sis-placeholder: #757575; /* browser-default placeholder the boards show */
    --sis-text-on-dark: #FFFFFF;
    --sis-text-on-accent: #2A1A00;
    --sis-link: #417687;

    /* Borders and dividers */
    --sis-border: #DCE3E9;
    --sis-border-control: #C9D6DC;
    --sis-border-field: #CAD3DF;
    --sis-border-dashed: #9FB3BC;
    --sis-border-empty: #B7C4CB;
    --sis-divider: #EEF2F4;
    --sis-divider-strong: #E4EAEE;
    --sis-fill-faint: #D3DDE2; /* upcoming step dot, sheet grabber */

    /* Surfaces */
    --sis-surface: #FFFFFF;
    --sis-surface-subtle: #F6F9FA;
    --sis-surface-muted: #F7F9FA;
    --sis-surface-hover: #F2F7F8;
    --sis-surface-track: #E3ECEF;
    --sis-surface-count: #E9EEF1;
    --sis-surface-selected: #EAF4F5;
    --sis-icon-tile-bg: #EAF4F5;
    --sis-icon-tile-fg: #417687;
    --sis-empty-icon-grey-bg: #F1F4F6;

    /* Brand actions */
    --sis-primary: #2D505B;
    --sis-primary-hover: #1F3A42;
    --sis-primary-active: #173038;
    --sis-primary-shadow: 0 6px 14px -8px rgba(45, 80, 91, 0.8);
    --sis-highlight: #FFCE11;
    --sis-danger: #A1352E;
    --sis-danger-hover: #8A2B25;
    --sis-danger-active: #74231E;

    /* Tones: background / foreground (/ border) */
    --sis-success-bg: #E3F4EA;
    --sis-success-fg: #1E6B42;
    --sis-success-icon: #1E8E4F;
    --sis-warning-bg: #FFF3DE;
    --sis-warning-fg: #7A4A00;
    --sis-result-icon-warning-fg: #9A5B00;
    --sis-warning-text: #6E4500;
    --sis-warning-box-bg: #FFF8EC;
    --sis-warning-box-border: #F3DDB3;
    --sis-warning-strip-bg: #FFF6E5;
    --sis-warning-strip-subtext: #6B5A1E;
    --sis-warning-strip-border: #F3E2BF;
    --sis-info-bg: #E6F0F8;
    --sis-info-fg: #1F5A8C;
    --sis-result-icon-info-fg: #2F6DA8;
    --sis-callout-bg: #EAF2FB;
    --sis-callout-fg: #1B4A73;
    --sis-callout-border: #C9DCF0;
    --sis-callout-body: #24506F;
    --sis-neutral-bg: #EEF3F5;
    --sis-neutral-fg: #3F5C67;
    --sis-danger-bg: #FCE9E7;
    --sis-danger-fg: #7E2A24;
    --sis-danger-border: #F1C4BF;
    --sis-reserved-bg: #F3ECFA;
    --sis-reserved-fg: #5B3A86;

    /* Favorite star */
    --sis-star-fill: #E0B000;
    --sis-star-stroke: #B88F00;
    --sis-star-bg: #FFF8DD;
    --sis-star-wash-hover: rgba(45, 80, 91, 0.06);
    --sis-star-wash-active: rgba(45, 80, 91, 0.1);

    /* Radii */
    --sis-radius-xs: 8px;
    --sis-radius-compact: 9px; /* segmented active pill, cart-strip chip */
    --sis-radius-sm: 10px;
    --sis-radius-md: 12px;
    --sis-radius-lg: 14px;
    --sis-radius-xl: 16px;
    --sis-radius-dialog: 18px;
    --sis-radius-sheet: 20px;
    --sis-radius-pill: 999px;

    /* Elevation */
    --sis-shadow-card: 0 10px 24px -20px rgba(45, 80, 91, 0.45);
    --sis-shadow-aside: 0 10px 24px -18px rgba(45, 80, 91, 0.45);
    --sis-shadow-raised: 0 1px 2px rgba(45, 80, 91, 0.15);
    --sis-shadow-popover: 0 16px 36px -22px rgba(10, 30, 36, 0.5);
    --sis-shadow-dialog: 0 24px 60px -20px rgba(10, 30, 36, 0.55);
    --sis-shadow-sheet: 0 -12px 30px -12px rgba(10, 30, 36, 0.5);
    --sis-shadow-sticky: 0 -8px 20px -14px rgba(45, 80, 91, 0.5);
    --sis-scrim: rgba(20, 40, 48, 0.45);

    /* Focus */
    --sis-focus-color: #417687;
    --sis-focus-ring-field: 0 0 0 3px rgba(65, 118, 135, 0.15);

    /* Toast */
    --sis-toast-bg: #1F3A42;
    --sis-toast-action-bg: rgba(255, 255, 255, 0.14);

    /* Motion */
    --sis-ease: cubic-bezier(0.2, 0, 0, 1);
    --sis-duration: 150ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sis-duration: 0ms;
    }
}

/* Visually hidden but read by screen readers (labels for icon-only controls, live regions). */
.sis-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}