:root {
    color-scheme: light;

    --bgt-color-bg: #f7f5ef;
    --bgt-color-workbench: #eeece5;
    --bgt-color-surface: #ffffff;
    --bgt-color-surface-muted: #f1efe8;
    --bgt-color-surface-raised: #ffffff;
    --bgt-color-border: #d7d4ca;
    --bgt-color-border-strong: #aaa99f;
    --bgt-color-text: #17221d;
    --bgt-color-text-muted: #5d675f;
    --bgt-color-text-subtle: #7d857f;
    --bgt-color-primary: #245c3b;
    --bgt-color-primary-hover: #19472d;
    --bgt-color-primary-text: #ffffff;
    --bgt-color-danger: #b42318;
    --bgt-color-danger-hover: #912018;
    --bgt-color-danger-surface: #fff1f0;
    --bgt-color-warning: #b7791f;
    --bgt-color-warning-surface: #fff7df;
    --bgt-color-info: #2662a8;
    --bgt-color-info-surface: #eef5ff;
    --bgt-color-success: #287a3f;
    --bgt-color-success-surface: #edf9f0;
    --bgt-color-disabled-bg: #eef1f5;
    --bgt-color-disabled-text: #8b97a5;

    --bgt-font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --bgt-font-size-xs: 0.75rem;
    --bgt-font-size-sm: 0.875rem;
    --bgt-font-size-md: 0.95rem;
    --bgt-font-size-lg: 1.05rem;
    --bgt-font-weight-normal: 400;
    --bgt-font-weight-medium: 500;
    --bgt-font-weight-semibold: 600;
    --bgt-line-height-tight: 1.25;
    --bgt-line-height: 1.45;

    --bgt-space-1: 0.25rem;
    --bgt-space-2: 0.5rem;
    --bgt-space-3: 0.75rem;
    --bgt-space-4: 1rem;
    --bgt-space-5: 1.25rem;
    --bgt-space-6: 1.5rem;
    --bgt-space-7: 2rem;
    --bgt-space-8: 3rem;

    --bgt-radius-sm: 0.25rem;
    --bgt-radius-md: 0.375rem;
    --bgt-radius-lg: 0.5rem;
    --bgt-border-width: 1px;
    --bgt-focus-ring: 0 0 0 3px rgb(43 111 137 / 0.3);
    --bgt-shadow-sm: 0 1px 2px rgb(23 34 29 / 0.1);
    --bgt-shadow-md: 0 12px 32px rgb(23 34 29 / 0.16);
    --bgt-shadow-lg: 0 24px 64px rgb(23 34 29 / 0.28);
    --bgt-motion-fast: 120ms;
    --bgt-control-height-sm: 1.875rem;
    --bgt-control-height-md: 2.25rem;
    --bgt-control-height-lg: 2.75rem;
    --bgt-control-padding-x: 0.75rem;
}

.bgt-button {
    align-items: center;
    border: var(--bgt-border-width) solid transparent;
    border-radius: var(--bgt-radius-md);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--bgt-font-family);
    font-size: var(--bgt-font-size-sm);
    font-weight: var(--bgt-font-weight-medium);
    gap: var(--bgt-space-2);
    justify-content: center;
    line-height: var(--bgt-line-height-tight);
    min-height: var(--bgt-control-height-md);
    padding: 0 var(--bgt-control-padding-x);
    text-decoration: none;
    transition: background-color var(--bgt-motion-fast) ease, border-color var(--bgt-motion-fast) ease, color var(--bgt-motion-fast) ease, box-shadow var(--bgt-motion-fast) ease;
    user-select: none;
    white-space: nowrap;
}

.bgt-button:focus-visible,
.bgt-input:focus-visible,
.bgt-select:focus-visible,
.bgt-numeric-step:focus-visible,
.bgt-dialog-close:focus-visible,
.bgt-checkbox-input:focus-visible + .bgt-checkbox-box {
    box-shadow: var(--bgt-focus-ring);
    outline: none;
}

.bgt-button:disabled {
    background: var(--bgt-color-disabled-bg);
    border-color: var(--bgt-color-border);
    color: var(--bgt-color-disabled-text);
    cursor: not-allowed;
}

.bgt-button-primary {
    background: var(--bgt-color-primary);
    border-color: var(--bgt-color-primary);
    color: var(--bgt-color-primary-text);
}

.bgt-button-primary:not(:disabled):hover {
    background: var(--bgt-color-primary-hover);
    border-color: var(--bgt-color-primary-hover);
}

.bgt-button-secondary {
    background: var(--bgt-color-surface);
    border-color: var(--bgt-color-border);
    color: var(--bgt-color-text);
}

.bgt-button-secondary:not(:disabled):hover {
    background: var(--bgt-color-surface-muted);
    border-color: var(--bgt-color-border-strong);
}

.bgt-tabs-list {
    background: var(--bgt-color-surface-muted);
    border: var(--bgt-border-width) solid var(--bgt-color-border);
    border-radius: var(--bgt-radius-md);
    display: inline-flex;
    gap: 2px;
    padding: 2px;
}

.bgt-tab-trigger {
    background: transparent;
    border: 0;
    border-radius: calc(var(--bgt-radius-md) - 2px);
    color: var(--bgt-color-text-muted);
    cursor: pointer;
    font: inherit;
    min-height: var(--bgt-control-height-sm);
    padding: 0 var(--bgt-space-3);
}

.bgt-tab-trigger[data-state="active"] {
    background: var(--bgt-color-surface);
    box-shadow: 0 1px 2px rgb(23 32 42 / 0.12);
    color: var(--bgt-color-text);
}

.bgt-tab-trigger:focus-visible,
.bgt-select-trigger:focus-visible {
    box-shadow: var(--bgt-focus-ring);
    outline: none;
}

.bgt-tab-trigger:disabled {
    color: var(--bgt-color-disabled-text);
    cursor: not-allowed;
}

.bgt-tab-panel {
    padding-block: var(--bgt-space-3);
}

.bgt-select-field {
    color: var(--bgt-color-text);
    display: grid;
    font-family: var(--bgt-font-family);
    gap: var(--bgt-space-1);
    max-width: 28rem;
}

.bgt-select-label {
    font-size: var(--bgt-font-size-sm);
    font-weight: var(--bgt-font-weight-medium);
}

.bgt-select-description,
.bgt-select-error {
    font-size: var(--bgt-font-size-xs);
}

.bgt-select-description {
    color: var(--bgt-color-text-muted);
}

.bgt-select-error {
    color: var(--bgt-color-danger);
}

.bgt-select-trigger {
    align-items: center;
    background: var(--bgt-color-surface);
    border: var(--bgt-border-width) solid var(--bgt-color-border);
    border-radius: var(--bgt-radius-md);
    color: var(--bgt-color-text);
    display: flex;
    font: inherit;
    justify-content: space-between;
    min-height: var(--bgt-control-height-md);
    padding-inline: var(--bgt-control-padding-x);
    width: 100%;
}

.bgt-select-chevron {
    align-items: center;
    display: inline-flex;
    flex: 0 0 1rem;
    height: 1rem;
    justify-content: center;
    line-height: 0;
    margin-inline-start: var(--bgt-space-2);
    width: 1rem;
}

.bgt-select-trigger:disabled {
    background: var(--bgt-color-disabled-bg);
    color: var(--bgt-color-disabled-text);
}

.bgt-select-field-invalid .bgt-select-trigger {
    border-color: var(--bgt-color-danger);
}

.bgt-select-content {
    background: var(--bgt-color-surface-raised);
    border: var(--bgt-border-width) solid var(--bgt-color-border-strong);
    border-radius: var(--bgt-radius-md);
    box-shadow: 0 10px 28px rgb(23 32 42 / 0.18);
    color: var(--bgt-color-text);
    max-height: min(18rem, calc(100vh - 2rem));
    overflow-y: auto;
    padding: var(--bgt-space-1);
    z-index: 1000;
}

.bgt-select-content:focus,
.bgt-select-content:focus-visible {
    box-shadow: var(--bgt-focus-ring), 0 10px 28px rgb(23 32 42 / 0.18);
    outline: none;
}

.bgt-select-group-label {
    color: var(--bgt-color-text-muted);
    display: block;
    font-size: var(--bgt-font-size-xs);
    font-weight: var(--bgt-font-weight-semibold);
    letter-spacing: 0.04em;
    padding: var(--bgt-space-2) var(--bgt-space-3) var(--bgt-space-1);
    text-transform: uppercase;
}

.bgt-select-group {
    display: grid;
}

.bgt-select-option {
    border-radius: var(--bgt-radius-sm);
    cursor: pointer;
    padding: var(--bgt-space-2) var(--bgt-space-3);
}

.bgt-select-option[data-focused="true"] {
    background: var(--bgt-color-surface-muted);
}

.bgt-select-option[data-state="checked"] {
    color: var(--bgt-color-primary);
    font-weight: var(--bgt-font-weight-semibold);
}

.bgt-select-option[data-disabled="true"] {
    color: var(--bgt-color-disabled-text);
    cursor: not-allowed;
}

.bgt-dialog-overlay {
    background: rgb(23 32 42 / 0.58);
    inset: 0;
    pointer-events: auto;
    position: fixed;
    z-index: 1000;
}

.bgt-dialog-content {
    background: var(--bgt-color-surface-raised);
    border: var(--bgt-border-width) solid var(--bgt-color-border);
    border-radius: var(--bgt-radius-lg);
    box-shadow: var(--bgt-shadow-lg);
    color: var(--bgt-color-text);
    left: 50%;
    max-height: calc(100vh - 2rem);
    max-width: min(30rem, calc(100vw - 2rem));
    overflow: auto;
    padding: var(--bgt-space-6);
    pointer-events: auto;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1001;
}

.bgt-dialog-header {
    align-items: flex-start;
    display: flex;
    gap: var(--bgt-space-4);
    justify-content: space-between;
}

.bgt-dialog-close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--bgt-radius-md);
    color: var(--bgt-color-text-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.bgt-dialog-close:hover {
    background: var(--bgt-color-surface-muted);
    color: var(--bgt-color-text);
}

.bgt-dialog-title {
    font-size: 1.25rem;
    margin: 0 0 var(--bgt-space-2);
}

.bgt-dialog-description {
    color: var(--bgt-color-text-muted);
    margin: 0;
}

.bgt-dialog-body {
    margin-block: var(--bgt-space-4);
}

.bgt-dialog-actions,
.bgt-primitive-validation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bgt-space-2);
}

.bgt-dialog-actions {
    justify-content: flex-end;
    margin-top: var(--bgt-space-5);
}

.bgt-alert {
    align-items: start;
    border: var(--bgt-border-width) solid var(--bgt-color-border);
    border-inline-start-width: 0.25rem;
    border-radius: var(--bgt-radius-md);
    color: var(--bgt-color-text);
    display: flex;
    gap: var(--bgt-space-1);
    justify-content: space-between;
    padding: var(--bgt-space-3) var(--bgt-space-4);
}

.bgt-alert-body {
    display: grid;
    gap: var(--bgt-space-1);
    min-width: 0;
}

.bgt-alert-dismiss {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--bgt-radius-sm);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2rem;
    justify-content: center;
    margin: calc(var(--bgt-space-1) * -1) calc(var(--bgt-space-2) * -1) calc(var(--bgt-space-1) * -1) var(--bgt-space-2);
    width: 2rem;
}

.bgt-alert-dismiss:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.bgt-alert-dismiss:focus-visible {
    box-shadow: var(--bgt-focus-ring);
    outline: none;
}

.bgt-alert-info {
    background: var(--bgt-color-info-surface);
    border-color: var(--bgt-color-info);
}

.bgt-alert-success {
    background: var(--bgt-color-success-surface);
    border-color: var(--bgt-color-success);
}

.bgt-alert-warning {
    background: var(--bgt-color-warning-surface);
    border-color: var(--bgt-color-warning);
}

.bgt-alert-error {
    background: var(--bgt-color-danger-surface);
    border-color: var(--bgt-color-danger);
}

.bgt-alert-title {
    font-weight: var(--bgt-font-weight-semibold);
}

.bgt-alert-content {
    color: inherit;
}

.bgt-primitive-validation {
    color: var(--bgt-color-text);
    display: grid;
    gap: var(--bgt-space-4);
    margin-inline: auto;
    max-width: 48rem;
    padding: var(--bgt-space-6);
}

@media (forced-colors: active) {
    .bgt-tab-trigger[data-state="active"],
    .bgt-select-field-invalid .bgt-select-trigger {
        outline: 2px solid CanvasText;
    }
}

.bgt-button-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--bgt-color-text);
}

.bgt-button-ghost:not(:disabled):hover {
    background: var(--bgt-color-surface-muted);
}

.bgt-button-link {
    background: transparent;
    border-color: transparent;
    color: var(--bgt-color-primary);
    padding-inline: var(--bgt-space-2);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.25rem;
}

.bgt-button-link:not(:disabled):hover {
    background: transparent;
    color: var(--bgt-color-primary-hover);
    text-decoration-color: currentColor;
}

.bgt-button-danger {
    background: var(--bgt-color-danger);
    border-color: var(--bgt-color-danger);
    color: #ffffff;
}

.bgt-button-danger:not(:disabled):hover {
    background: var(--bgt-color-danger-hover);
    border-color: var(--bgt-color-danger-hover);
}

.bgt-button-small {
    font-size: var(--bgt-font-size-xs);
    min-height: var(--bgt-control-height-sm);
    padding: 0 var(--bgt-space-2);
}

.bgt-button-large {
    font-size: var(--bgt-font-size-md);
    min-height: var(--bgt-control-height-lg);
    padding: 0 var(--bgt-space-4);
}

.bgt-icon {
    flex: 0 0 auto;
    pointer-events: none;
    vertical-align: middle;
}

.bgt-field {
    display: grid;
    gap: var(--bgt-space-1);
}

.bgt-field-label {
    color: var(--bgt-color-text);
    font-size: var(--bgt-font-size-sm);
    font-weight: var(--bgt-font-weight-semibold);
}

.bgt-field-description,
.bgt-field-message {
    color: var(--bgt-color-text-muted);
    font-size: var(--bgt-font-size-xs);
    line-height: var(--bgt-line-height);
}

.bgt-field-message-invalid {
    color: var(--bgt-color-danger);
}

.bgt-input,
.bgt-select {
    background: var(--bgt-color-surface);
    border: var(--bgt-border-width) solid var(--bgt-color-border);
    border-radius: var(--bgt-radius-md);
    color: var(--bgt-color-text);
    font-family: var(--bgt-font-family);
    font-size: var(--bgt-font-size-sm);
    min-height: var(--bgt-control-height-md);
    padding: 0 var(--bgt-control-padding-x);
    width: 100%;
}

.bgt-input:disabled,
.bgt-select:disabled {
    background: var(--bgt-color-disabled-bg);
    color: var(--bgt-color-disabled-text);
    cursor: not-allowed;
}

.bgt-input-invalid,
.bgt-select-invalid {
    border-color: var(--bgt-color-danger);
}

.bgt-textarea {
    line-height: var(--bgt-line-height);
    min-height: 6.5rem;
    padding-block: var(--bgt-space-2);
    resize: vertical;
}

.bgt-numeric-control {
    display: grid;
    grid-template-columns: var(--bgt-control-height-md) minmax(4.5rem, 1fr) var(--bgt-control-height-md);
    max-width: 13rem;
}

.bgt-numeric-control:focus-within {
    border-radius: var(--bgt-radius-md);
    box-shadow: var(--bgt-focus-ring);
}

.bgt-numeric-input {
    appearance: textfield;
    border-radius: 0;
    min-width: 0;
    text-align: center;
}

.bgt-numeric-input:focus-visible {
    box-shadow: none;
    outline: none;
}

.bgt-numeric-input::-webkit-inner-spin-button,
.bgt-numeric-input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

.bgt-numeric-step {
    background: var(--bgt-color-surface-muted);
    border: var(--bgt-border-width) solid var(--bgt-color-border);
    color: var(--bgt-color-text);
    cursor: pointer;
    font: inherit;
    font-size: 1.1rem;
}

.bgt-numeric-step:first-child {
    border-radius: var(--bgt-radius-md) 0 0 var(--bgt-radius-md);
    border-inline-end: 0;
}

.bgt-numeric-step:last-child {
    border-inline-start: 0;
    border-radius: 0 var(--bgt-radius-md) var(--bgt-radius-md) 0;
}

.bgt-numeric-step:disabled {
    color: var(--bgt-color-disabled-text);
    cursor: not-allowed;
}

.bgt-field-invalid .bgt-input {
    border-color: var(--bgt-color-danger);
}

.bgt-menu-content {
    background: var(--bgt-color-surface-raised);
    border: var(--bgt-border-width) solid var(--bgt-color-border-strong);
    border-radius: var(--bgt-radius-md);
    box-shadow: var(--bgt-shadow-md);
    display: grid;
    min-width: 13rem;
    padding: var(--bgt-space-1);
}

.bgt-menu-trigger-icon-only {
    height: var(--bgt-control-height-lg);
    min-height: var(--bgt-control-height-lg);
    padding: 0;
    width: var(--bgt-control-height-lg);
}

.bgt-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.bgt-menu-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--bgt-radius-sm);
    color: var(--bgt-color-text);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: var(--bgt-space-2);
    min-height: 2.5rem;
    padding: var(--bgt-space-2) var(--bgt-space-3);
    text-align: start;
    width: 100%;
}

.bgt-menu-item:focus-visible,
.bgt-menu-item[data-focused="true"] {
    background: var(--bgt-color-surface-muted);
    outline: none;
}

.bgt-menu-item[disabled],
.bgt-menu-item[data-disabled="true"] {
    color: var(--bgt-color-disabled-text);
    cursor: not-allowed;
}

.bgt-menu-item-danger {
    color: var(--bgt-color-danger);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --bgt-motion-fast: 0.01ms;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}

.bgt-checkbox {
    align-items: center;
    color: var(--bgt-color-text);
    cursor: pointer;
    display: inline-flex;
    gap: var(--bgt-space-2);
    line-height: var(--bgt-line-height);
}

.bgt-checkbox-disabled {
    color: var(--bgt-color-disabled-text);
    cursor: not-allowed;
}

.bgt-checkbox-input {
    opacity: 0;
    position: absolute;
}

.bgt-checkbox-box {
    align-items: center;
    background: var(--bgt-color-surface);
    border: var(--bgt-border-width) solid var(--bgt-color-border);
    border-radius: var(--bgt-radius-sm);
    color: var(--bgt-color-primary);
    display: inline-flex;
    height: 1rem;
    justify-content: center;
    width: 1rem;
}

.bgt-checkbox-input:checked + .bgt-checkbox-box {
    border-color: var(--bgt-color-primary);
}

.bgt-panel {
    background: var(--bgt-color-surface);
    border: var(--bgt-border-width) solid var(--bgt-color-border);
    border-radius: var(--bgt-radius-lg);
}

.bgt-panel-header {
    border-bottom: var(--bgt-border-width) solid var(--bgt-color-border);
    padding: var(--bgt-space-3) var(--bgt-space-4);
}

.bgt-panel-body {
    padding: var(--bgt-space-4);
}

.bgt-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--bgt-space-2);
}
