:root {
    color-scheme: light;

    --ui-font-sans: "Segoe UI Variable Text", "Segoe UI Variable", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    --ui-font-display: "Segoe UI Variable Display", "Segoe UI Variable", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    --ui-font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    --ui-font-size-xs: 12px;
    --ui-font-size-sm: 13px;
    --ui-font-size-base: 14px;
    --ui-font-size-md: 15px;
    --ui-font-size-lg: 17px;
    --ui-font-size-title-mobile: 22px;
    --ui-font-size-title: 26px;
    --ui-line-height-tight: 1.2;
    --ui-line-height-base: 1.5;
    --ui-line-height-title: 1.34;
    --ui-font-weight-regular: 400;
    --ui-font-weight-medium: 500;
    --ui-font-weight-semibold: 600;
    --ui-font-weight-bold: 700;

    --ui-canvas: #f5f7f8;
    --ui-surface: #ffffff;
    --ui-surface-subtle: #f8faf9;
    --ui-surface-muted: #eef2f1;
    --ui-surface-raised: #ffffff;
    --ui-surface-sunken: #e8edeb;
    --ui-shell: #111b19;
    --ui-shell-hover: #1a2925;
    --ui-shell-selected: #203a34;
    --ui-shell-border: rgb(255 255 255 / 7%);
    --ui-shell-control: #182522;
    --ui-shell-control-hover: #293b36;
    --ui-shell-control-border: #526861;
    --ui-shell-section: #8fa09b;
    --ui-shell-link: #cbd5d2;
    --ui-shell-active: #ecfaf5;
    --ui-shell-accent: #55c7a7;

    --ui-text-strong: #111b19;
    --ui-text: #293633;
    --ui-text-muted: #596963;
    --ui-text-soft: #5f706a;
    --ui-text-disabled: #8b9794;
    --ui-text-inverse: #f6f8fa;
    --ui-text-inverse-muted: #afbfba;

    --ui-border: #dbe2df;
    --ui-border-strong: #c6d0cc;
    --ui-border-control: #778a84;
    --ui-divider: #e8edeb;

    --ui-brand: #087866;
    --ui-brand-hover: #066453;
    --ui-brand-active: #054f42;
    --ui-brand-tint: #e8f7f2;
    --ui-brand-border: #8ccdbb;
    --ui-accent: #3157d5;
    --ui-accent-hover: #2648bc;
    --ui-accent-tint: #eef2ff;
    --ui-accent-border: #b9c5f5;
    --ui-violet: #7257c8;
    --ui-violet-tint: #f3f0ff;
    --ui-amber: #a15c00;
    --ui-amber-tint: #fff5e6;
    --ui-coral: #b5473b;
    --ui-coral-tint: #fff0ee;

    --ui-link: #2458b8;
    --ui-link-hover: #1b438f;
    --ui-selection: #d9eee8;
    --ui-focus: #087866;
    --ui-focus-ring: rgb(8 120 102 / 24%);
    --ui-row-hover: #f5f8f7;
    --ui-row-selected: #e5f3ef;
    --ui-row-selected-border: #77b9a8;
    --ui-overlay: rgb(9 20 17 / 48%);
    --ui-report-paper: #ffffff;
    --ui-positive: #146b45;
    --ui-negative: #b42318;

    --ui-success: #16714a;
    --ui-success-bg: #eaf7f0;
    --ui-success-border: #9ed6b9;
    --ui-warning: #7a4d00;
    --ui-warning-bg: #fff5db;
    --ui-warning-border: #e8c46f;
    --ui-danger: #b42318;
    --ui-danger-hover: #921d15;
    --ui-danger-bg: #fff1f0;
    --ui-danger-border: #efb1ab;
    --ui-info: #175cd3;
    --ui-info-bg: #eff6ff;
    --ui-info-border: #a8c9f5;

    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-space-10: 40px;
    --ui-space-12: 48px;

    --ui-radius-xs: 2px;
    --ui-radius-sm: 4px;
    --ui-radius-md: 6px;
    --ui-radius-lg: 8px;
    --ui-radius-pill: 999px;
    --ui-pill: 999px;

    --ui-shadow-sm: 0 1px 2px rgb(12 26 22 / 5%), 0 1px 1px rgb(12 26 22 / 3%);
    --ui-shadow-md: 0 12px 32px rgb(12 26 22 / 9%), 0 2px 6px rgb(12 26 22 / 4%);
    --ui-shadow-popover: 0 24px 64px rgb(12 26 22 / 18%), 0 4px 12px rgb(12 26 22 / 7%);

    --ui-duration-fast: 120ms;
    --ui-duration-normal: 180ms;
    --ui-ease: cubic-bezier(.2, 0, 0, 1);

    --ui-control-height: 42px;
    --ui-touch-target: 44px;
    --ui-table-row: 42px;
    --ui-table-row-compact: 38px;

    --ui-nav-width: 244px;
    --ui-topbar-height: 64px;
    --ui-content-max: 1600px;
    --ui-form-max: 1180px;
    --ui-reading-max: 72ch;
    --ui-page-gutter: clamp(22px, 2.35vw, 36px);

    --ui-z-shell: 40;
    --ui-z-sticky: 30;
    --ui-z-drawer: 100;
    --ui-z-popover: 120;
    --ui-z-progress: 150;

    /* CSS media queries cannot consume custom properties; these values document the layout contract. */
    --ui-breakpoint-phone: 479px;
    --ui-breakpoint-mobile: 767px;
    --ui-breakpoint-tablet: 1023px;
    --ui-breakpoint-compact-shell: 1200px;
}

@media (max-width: 767px) {
    :root {
        --ui-page-gutter: 16px;
        --ui-topbar-height: 58px;
    }
}

@media (max-width: 479px) {
    :root {
        --ui-page-gutter: 12px;
    }
}