:root {
    --canvas: #f5f5f7;
    --surface: #ffffff;
    --secondary-control: #ffffff;
    --field: #ededf0;
    --hover: #e7e7ec;
    --selected: #e2e2e8;
    --text: #1d1d1f;
    --secondary-text: #616166;
    --divider: #d8d8de;
    --primary: #1d1d1f;
    --primary-text: #ffffff;

    --semantic-good-bg: #e8f5ee;
    --semantic-good-fg: #146c38;
    --semantic-good-fill: #1f9d55;

    --semantic-warn-bg: #fef3dc;
    --semantic-warn-fg: #945305;
    --semantic-warn-fill: #d97706;

    --semantic-danger-bg: #fde8ec;
    --semantic-danger-fg: #b41c38;
    --semantic-danger-fill: #e11d48;

    --semantic-info-bg: #eaeef6;
    --semantic-info-fg: #2b4c7e;
    --semantic-info-fill: #3b6998;

    --shell-inset: 16px;
    --sidebar-width: 240px;
    --sidebar-padding: 12px;
    --page-gap: 24px;
    --group-gap: 20px;
    --field-gap: 12px;
    --related-gap: 8px;
    --joined-gap: 3px;

    --control-height: 32px;
    --control-comfortable: 36px;
    --nav-item-height: 36px;
    --table-row-height: 40px;

    --radius-control: 10px;
    --radius-nav: 10px;
    --radius-menu: 10px;
    --radius-modal: 20px;
    --radius-sidebar: 20px;
    --radius-surface: 16px;
    --radius-joined-inner: 4px;

    --sidebar-shadow: 0 8px 28px rgb(0 0 0 / 0.08);

    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --dur-state: 100ms;
    --dur-reveal: 180ms;
    --dur-modal-in: 200ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background-color: var(--canvas);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
}

button,
input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #c4c4cc transparent;
}

*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #c4c4cc;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #9e9ea8;
}

@keyframes spinner-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinner-dash {
    0% {
        stroke-dasharray: 1, 60;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 40, 60;
        stroke-dashoffset: -14;
    }
    100% {
        stroke-dasharray: 40, 60;
        stroke-dashoffset: -55;
    }
}

.ui-spinner {
    width: 16px;
    height: 16px;
    display: block;
    animation: spinner-rotate 1.4s linear infinite;
}

.ui-spinner-arc {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    animation: spinner-dash 1.4s ease-in-out infinite;
}

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