:root {
    --z-index-reconnect-dialog: 40;
    --z-index-dialog-backdrop: 30;
    --z-index-navigation: 20;
    --z-index-navigation-overlay: 10;

    --spacing-2xs: 0.125em;
    --spacing-xs: 0.25em;
    --spacing-sm: 0.5em;
    --spacing-md: 0.75em;
    --spacing-lg: 1em;
    --spacing-xl: 1.25em;
    --spacing-2xl: 1.5em;

    --spacing-content: var(--spacing-xl);
    --spacing-related: var(--spacing-sm);
    --spacing-internal: var(--spacing-sm);
    --spacing-input: var(--spacing-sm);

    --font-size-base: 1rem;
    --font-size-3xs: 0.75em;
    --font-size-2xs: 0.813em;
    --font-size-xs: 0.875em;
    --font-size-sm: 0.938em;
    --font-size-md: 1em;
    --font-size-lg: 1.125em;
    --font-size-xl: 1.25em;
    --font-size-2xl: 1.5em;
    --font-size-3xl: 2em;

    --letter-spacing-tight: -0.065em;
    --letter-spacing-loose: 0.065em;
    --letter-spacing-wide: 0.1em;

    --border-width-content: 1px;
    --border-width-panel: 1px;
    --border-width-input: 1px;
    --border-width-button: 1px;
    --border-width-table: 1px;

    --border-radius-xs: 0.188em;
    --border-radius-sm: 0.25em;
    --border-radius-md: 0.5em;
    --border-radius-lg: 0.75em;
    --border-radius-xl: 1em;
    --border-radius-2xl: 2em;
    --border-radius-full: 100em;
    --border-radius-content: var(--border-radius-md);
    --border-radius-panel: var(--border-radius-md);
    --border-radius-input: var(--border-radius-md);
    --border-radius-button: var(--border-radius-md);
    --border-radius-accordion: var(--border-radius-sm);

    --shadow-content: 0 .1em .2em rgb(0 0 0 / 10%);
    --shadow-panel: 0 .1em .2em rgb(0 0 0 / 10%);
    --shadow-popout: 0 .15em .25em rgb(0 0 0 / 15%);
    --shadow-notification: 0 .15em .25em rgb(0 0 0 / 15%);
    --shadow-input: 0 .065em .125em 0 rgb(0 0 0 / 5%);
    --shadow-tab: 0 .065em .125em 0 rgb(0 0 0 / 7.5%);
    --shadow-faint: 0 .065em .125em 0 rgb(0 0 0 / 5%);

    --outline-width: 2px;
    --outline-rest: var(--outline-width) solid transparent;
    --outline-focus: var(--outline-width) solid var(--color-outline-focus);
    --outline-focus-visible: var(--outline-width) solid var(--color-outline-focus-visible);
    --outline-offset: var(--outline-width);
    --outline-offset-negative: calc(var(--outline-width) * -1);

    --input-border-rest: var(--border-width-input) solid var(--color-input-border);
    --input-border-hover: var(--border-width-input) solid var(--color-input-border-hover);
    --input-border-focus: var(--border-width-input) solid transparent;
    --input-border-error: var(--border-width-input) solid transparent;

    --input-outline-rest: var(--outline-rest);
    --input-outline-focus: var(--outline-width) solid var(--color-outline-focus-visible);
    --input-outline-error: var(--outline-width) solid var(--color-outline-error);

    --input-width-xs: 5em;
    --input-width-sm: 10em;
    --input-width-md: 20em;
    --input-width-lg: 30em;
    --input-width-text: var(--input-width-md);
    --input-width-search: var(--input-width-md);
    --input-width-email: var(--input-width-lg);
    --input-width-password: var(--input-width-md);
    --input-width-number: var(--input-width-sm);
    --input-width-select: var(--input-width-md);
    --input-width-textarea: var(--input-width-lg);

    --input-height-base: 2.25em;
    --input-height-textarea: 5em;

    --check-box-mark-path: polygon(24% 43%, 14% 53%, 39% 78%, 87% 33%, 77% 23%, 39% 58%);

    --button-base-width: 2.25em;
    --button-base-height: 2.25em;

    --input-line-height: 1.125em;
    --button-line-height: 1.125em;
    --textarea-line-height: 1.4em;

    --select-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 13c-.18 0-.36-.07-.49-.2l-4.8-4.65c-.27-.26-.27-.69 0-.96s.72-.26.99 0l4.31 4.17 4.3-4.17c.27-.26.72-.26.99 0 .27.26.27.69 0 .96l-4.8 4.65c-.14.13-.32.2-.49.2Z'/%3e%3c/svg%3e");
    --select-icon-disabled: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23777c' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 13c-.18 0-.36-.07-.49-.2l-4.8-4.65c-.27-.26-.27-.69 0-.96s.72-.26.99 0l4.31 4.17 4.3-4.17c.27-.26.72-.26.99 0 .27.26.27.69 0 .96l-4.8 4.65c-.14.13-.32.2-.49.2Z'/%3e%3c/svg%3e");
    --select-icon-multi-direction: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z'/%3e%3c/svg%3e");
    --select-icon-multi-direction-disabled: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23777c' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z'/%3e%3c/svg%3e");
    --combo-box-icon: var(--select-icon-multi-direction);
    --combo-box-icon-disabled: var(--select-icon-multi-direction-disabled);

    --paragraph-width-optimal: 70ch;

    --transition-duration: .2s;
    --transition-duration-fast: .1s;
    --transition-input:
        outline var(--transition-duration) ease,
        color var(--transition-duration-fast) ease,
        border-color var(--transition-duration-fast) ease,
        background-color var(--transition-duration-fast) ease;

    --reconnect-dialog-backdrop-filter: blur(8px);

    --loading-spinner-size: 1.5em;
    --loading-spinner-thickness: .35em;
    --loading-spinner-animation-duration: .75s;
}

/* Box Sizing Reset */
html {
    box-sizing: border-box;
}

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

/* Base */
:root {
    background-color: var(--color-body-background);
    color: var(--color-body-text);
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    transition:
        background-color var(--transition-duration-fast) ease,
        color var(--transition-duration-fast) ease;
}

/* Typography */
a {
    min-width: 0;
    color: var(--color-link-text);
    text-decoration: underline;
    text-underline-offset: var(--spacing-2xs);
    overflow-wrap: break-word;
}

a[href]:hover {
    color: var(--color-link-text-hover);
    text-decoration: underline;
}

a:focus-visible {
    outline: var(--outline-focus-visible);
}

a[disabled] {
    opacity: var(--control-opacity-disabled);
    pointer-events: none;
}

h1,
h2,
h3,
h4,
h5 {
    min-width: 0;
    margin: 0;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-body-text);
    overflow-wrap: break-word;
}

h1[disabled],
h2[disabled],
h3[disabled],
h4[disabled],
h5[disabled] {
    opacity: 50%;
}

h1 {
    font-size: var(--font-size-2xl);
}

h2 {
    font-size: var(--font-size-xl);
}

h3 {
    font-size: var(--font-size-lg);
}

h4 {
    font-size: var(--font-size-md);
}

h5 {
    font-size: var(--font-size-base);
}

p {
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
    overflow-wrap: break-word;
}

p:not(.expand) {
    max-width: var(--paragraph-width-optimal);
}

strong {
    font-weight: 700;
}

label {
    margin: 0;
    font-size: inherit;
}

input,
button,
textarea,
select {
  font: inherit;
}

ul,
ol {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0 0 0 var(--spacing-content);
}

ul {
    list-style-type: disc;
}

li {
    margin: 0;
}

li::marker {
    color: var(--color-body-text-faint);
}

hr {
    align-self: stretch;
    margin: 0;
    border-width: var(--border-width-content) 0 0;
    border-style: solid;
    border-color: var(--color-border-faint-5);
}

blockquote {
    min-width: 0;
    max-width: var(--paragraph-width-optimal);
    margin: 0;
    padding:
        var(--spacing-sm)
        var(--spacing-lg);
    border-left: var(--spacing-2xs) solid var(--color-border-faint-5);
    color: var(--color-body-text);
    font-style: italic;
    font-weight: 500;
}

code {
    min-width: 0;
    padding: 0 var(--spacing-xs);
    margin: 0 var(--spacing-2xs) 0 0;
    background-color: var(--color-code-background);
    color: var(--color-code-text);
    border-radius: var(--border-radius-sm);
    font-family: monospace;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

svg.icon {
    display: block;
    width: 1em;
    height: 1em;
    min-width: 1em;
}

/* Spacing */
.gap-2xs {
    gap: var(--spacing-2xs);
}

.gap-xs {
    gap: var(--spacing-xs);
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

.gap-xl {
    gap: var(--spacing-xl);
}

.gap-2xl {
    gap: var(--spacing-2xl);
}

/* Padding */
.padding-2xs {
    padding: var(--spacing-2xs);
}

.padding-xs {
    padding: var(--spacing-xs);
}

.padding-sm {
    padding: var(--spacing-sm);
}

.padding-md {
    padding: var(--spacing-md);
}

.padding-lg {
    padding: var(--spacing-lg);
}

.padding-xl {
    padding: var(--spacing-xl);
}

.padding-2xl {
    padding: var(--spacing-2xl);
}

/* Font Size */
.font-size-3xs {
    font-size: var(--font-size-3xs);
}

.font-size-2xs {
    font-size: var(--font-size-2xs);
}

.font-size-xs {
    font-size: var(--font-size-xs);
}

.font-size-sm {
    font-size: var(--font-size-sm);
}

.font-size-md {
    font-size: var(--font-size-md);
}

.font-size-lg {
    font-size: var(--font-size-lg);
}

.font-size-xl {
    font-size: var(--font-size-xl);
}

.font-size-2xl {
    font-size: var(--font-size-2xl);
}

.font-size-3xl {
    font-size: var(--font-size-3xl);
}

/* Color */
.color-body-text {
    color: var(--color-body-text);
}

.color-body-text-faint {
    color: var(--color-body-text-faint);
}

.color-primary {
    color: var(--color-primary);
}

.color-status-default {
    color: var(--color-status-default);
}

.color-status-default-text {
    color: var(--color-status-default-text);
}

.color-status-default-faint {
    color: var(--color-status-default-faint);
}

.color-status-success {
    color: var(--color-status-success);
}

.color-status-success-text {
    color: var(--color-status-success-text);
}

.color-status-success-faint {
    color: var(--color-status-success-faint);
}

.color-status-warning {
    color: var(--color-status-warning);
}

.color-status-warning-text {
    color: var(--color-status-warning-text);
}

.color-status-warning-faint {
    color: var(--color-status-warning-faint);
}

.color-status-danger {
    color: var(--color-status-danger);
}

.color-status-danger-text {
    color: var(--color-status-danger-text);
}

.color-status-danger-faint {
    color: var(--color-status-danger-faint);
}

.color-status-info {
    color: var(--color-status-info);
}

.color-status-info-text {
    color: var(--color-status-info-text);
}

.color-status-info-faint {
    color: var(--color-status-info-faint);
}