/* Light */
:root {
    --color-background-faint: rgb(0 0 0 / 2.5%);
    --color-background-faint-5: rgb(0 0 0 / 5%);
    --color-background-faint-10: rgb(0 0 0 / 10%);
    --color-background-faint-15: rgb(0 0 0 / 15%);
    --color-background-faint-20: rgb(0 0 0 / 20%);

    --color-border-faint: rgb(0 0 0 / 2.5%);
    --color-border-faint-5: rgb(0 0 0 / 5%);
    --color-border-faint-10: rgb(0 0 0 / 10%);
    --color-border-faint-15: rgb(0 0 0 / 15%);
    --color-border-faint-20: rgb(0 0 0 / 20%);

    --filter-lighten-faint: brightness(102.5%);
    --filter-darken-faint: brightness(95%);

    --color-state-hover-lighten: rgb(255 255 255 / 50%);
    --color-state-hover-darken: rgb(0 0 0 / 7.5%);
    --color-state-hover: rgb(0 0 0 / 5%);
    --color-state-active: rgb(0 0 0 / 7.5%);
    --color-state-selected: rgb(0 0 0 / 10%);

    --color-body-background: #f3f4f6;
    --color-body-text: #444;
    --color-body-text-faint: #888;
    --color-body-text-highlight: #000;

    --color-header-background: #fff;
    --color-header-border: rgb(0 0 0 / 7.5%);

    --color-sidebar-open-background: #fff;

    --color-content-background: #fff;
    --color-content-border: rgb(0 0 0 / 7.5%);

    --color-overlay-background: rgb(0 0 0 / 25%);

    --color-panel-background: #fff;
    --color-panel-background-stacked: #eee;
    --color-panel-border: rgb(0 0 0 / 10%);
    --color-panel-border-inset: rgb(0 0 0 / 7.5%);

    --color-collapsible-content-background: #fff;
    --color-collapsible-content-background-hover: #eee;
    --color-collapsible-content-border: rgb(0 0 0 / 5%);
    --color-collapsible-content-border-inset: rgb(0 0 0 / 7.5%);

    --color-link-text: #1b72e8;
    --color-link-text-hover: #1b72e8;

    --color-body-text-decoration-faint: rgb(0 0 0 / 20%);
    --color-body-text-decoration-faint-hover: rgb(0 0 0 / 50%);

    --color-table-heading-background: #f8f8f8;
    --color-table-heading-background-hover: #f2f2f2;
    --color-table-heading-border: rgb(0 0 0 / 5%);
    --color-table-heading-border-hover: rgb(0 0 0 / 20%);
    --color-table-row-background: transparent;
    --color-table-row-background-hover: rgb(0 0 0 / 4%);
    --color-table-row-background-selected: rgb(0 0 0 / 8%);
    --color-table-row-border: rgb(0 0 0 / 5%);
    --color-table-row-border-hover: rgb(0 0 0 / 1.5%);
    --color-table-row-border-selected: transparent;
    --color-table-row-border-faint: rgb(0 0 0 / 3%);
    --color-table-row-text: var(--color-body-text);
    --color-table-row-text-hover: var(--color-body-text);
    --color-table-row-text-selected: var(--color-body-text);

    --color-input-text: #000;
    --color-input-background: #fff;
    --color-input-background-hover: #fff;
    --color-input-background-selected: rgb(0 0 0 / 90%);
    --color-input-background-selected-hover: rgb(0 0 0 / 75%);
    --color-input-background-contrast: rgb(0 0 0 / 10%);
    --color-input-background-contrast-hover: rgb(0 0 0 / 15%);
    --color-input-border: #ddd;
    --color-input-border-hover: #bbb;
    --color-input-border-selected: transparent;

    --color-toggle-background: rgb(0 0 0 / 25%);
    --color-toggle-background-hover: rgb(0 0 0 / 30%);

    --color-radio-tab-group-background: rgb(0 0 0 / 7.5%);
    --color-radio-tab-group-border: rgb(0 0 0 / 2.5%);

    --color-radio-tab-background: transparent;
    --color-radio-tab-border: transparent;
    --color-radio-tab-background-hover: rgb(255 255 255 / 50%);
    --color-radio-tab-border-hover: rgb(0 0 0 / 5%);
    --color-radio-tab-background-selected: rgb(255 255 255 / 100%);
    --color-radio-tab-border-selected: rgb(0 0 0 / 20%);

    --color-action-default: rgb(0 0 0 / 10%);
    --color-action-default-hover: rgb(0 0 0 / 15%);
    --color-action-default-contrast: var(--color-body-text);

    --color-action-primary: #222;
    --color-action-primary-hover: #444;
    --color-action-primary-contrast: #fff;

    --color-action-outline: #fff;
    --color-action-outline-hover: rgb(0 0 0 / 5%);
    --color-action-outline-border: rgb(0 0 0 / 15%);
    --color-action-outline-contrast: var(--color-body-text);

    --color-action-ghost: transparent;
    --color-action-ghost-hover: rgb(0 0 0 / 5%);
    --color-action-ghost-contrast: var(--color-body-text);

    --color-status-default: #e5e7eb;
    --color-status-default-hover: #d1d5db;
    --color-status-default-text: #555;
    --color-status-default-border: #d1d5db;
    --color-status-default-contrast: #000;
    --color-status-default-faint: #f9fafb;
    --color-status-default-faint-hover: #f3f4f6;
    --color-status-default-faint-contrast: #555;
    --color-status-default-faint-highlight: #d1d5db;

    --color-status-info: #3b82f6;
    --color-status-info-hover: #2563eb;
    --color-status-info-text: #1e3a8a;
    --color-status-info-border: #bfdbfe;
    --color-status-info-contrast: #fff;
    --color-status-info-faint: #dbeafe;
    --color-status-info-faint-hover: #bfdbfe;
    --color-status-info-faint-contrast: #1e3a8a;
    --color-status-info-faint-highlight: #60a5fa;

    --color-status-success: #10b981;
    --color-status-success-hover: #059669;
    --color-status-success-text: #065f46;
    --color-status-success-border: #a7f3d0;
    --color-status-success-contrast: #fff;
    --color-status-success-faint: #dcfce7;
    --color-status-success-faint-hover: #bbf7d0;
    --color-status-success-faint-contrast: #065f46;
    --color-status-success-faint-highlight: #34d399;

    --color-status-warning: #f97316;
    --color-status-warning-hover: #ea580c;
    --color-status-warning-text: #b45309;
    --color-status-warning-border: #fed7aa;
    --color-status-warning-contrast: #fff;
    --color-status-warning-faint: #ffedd5;
    --color-status-warning-faint-hover: #fed7aa;
    --color-status-warning-faint-contrast: #9a3412;
    --color-status-warning-faint-highlight: #fb923c;

    --color-status-danger: #dc2626;
    --color-status-danger-hover: #b91c1c;
    --color-status-danger-text: #b91c1c;
    --color-status-danger-border: #fecaca;
    --color-status-danger-contrast: #fff;
    --color-status-danger-faint: #fee2e2;
    --color-status-danger-faint-hover: #fecaca;
    --color-status-danger-faint-contrast: #991b1b;
    --color-status-danger-faint-highlight: #f87171;

    --color-status-error: #dc2626;
    --color-status-error-text: #dc2626;

    --color-status-elevate: #ddd6fe;
    --color-status-elevate-text: #581c87;

    --color-status-elevated: #fed7aa;
    --color-status-elevated-text: #653A20;

    --color-focus: #3b82f6;
    --color-focus-contrast: #fff;
    --color-outline-focus: var(--color-background-faint-20);
    --color-outline-focus-visible: var(--color-focus);
    --color-outline-error: var(--color-status-error);

    --color-code-background: rgb(0 0 0 / 7.5%);
    --color-code-text: var(--color-body-text);

    --shadow-sidebar-open: 0 .1em .2em rgb(0 0 0 / 10%);

    --control-opacity-disabled: 50%;
    --input-opacity-disabled: 50%;
    --input-icon-opacity-disabled: 75%;

    --color-loading-spinner-primary: var(--color-body-text);
    --color-loading-spinner-secondary: var(--color-code-background);

    color-scheme: light;
}

/* Dark */
:root.dark {
    --color-background-faint: rgb(255 255 255 / 2.5%);
    --color-background-faint-5: rgb(255 255 255 / 5%);
    --color-background-faint-10: rgb(255 255 255 / 10%);
    --color-background-faint-15: rgb(255 255 255 / 15%);
    --color-background-faint-20: rgb(255 255 255 / 20%);

    --color-border-faint: rgb(255 255 255 / 2.5%);
    --color-border-faint-5: rgb(255 255 255 / 5%);
    --color-border-faint-10: rgb(255 255 255 / 10%);
    --color-border-faint-15: rgb(255 255 255 / 15%);
    --color-border-faint-20: rgb(255 255 255 / 20%);

    --filter-lighten-faint: brightness(110%);
    --filter-darken-faint: brightness(95%);

    --color-state-hover-lighten: rgb(255 255 255 / 15%);
    --color-state-hover-darken: rgb(0 0 0 / 15%);
    --color-state-hover: rgb(255 255 255 / 5%);
    --color-state-active: rgb(255 255 255 / 10%);
    --color-state-selected: rgb(255 255 255 / 12.5%);

    --color-body-background: #09090b;
    --color-body-text: #e5e5e5;
    --color-body-text-faint: #999;
    --color-body-text-highlight: #fff;

    --color-header-background: #111;
    --color-header-border: rgb(255 255 255 / 5%);

    --color-sidebar-open-background: #111;

    --color-content-background: #262626;
    --color-content-border: rgb(255 255 255 / 5%);

    --color-panel-background: #222;
    --color-panel-background-stacked: #333;
    --color-panel-border: rgb(255 255 255 / 7.5%);
    --color-panel-border-inset: rgb(255 255 255 / 7.5%);

    --color-collapsible-content-background: #222;
    --color-collapsible-content-background-hover: #333;
    --color-collapsible-content-border: rgb(255 255 255 / 2.5%);
    --color-collapsible-content-border-inset: rgb(255 255 255 / 7.5%);

    --color-overlay-background: rgb(0 0 0 / 75%);

    --color-link-text: #38bdf8;
    --color-link-text-hover: #7dd3fc;

    --color-body-text-decoration-faint: rgb(255 255 255 / 25%);
    --color-body-text-decoration-faint-hover: rgb(255 255 255 / 50%);

    --color-table-heading-background: #2b2b2b;
    --color-table-heading-background-hover: #2f2f2f;
    --color-table-heading-border: rgb(255 255 255 / 5%);
    --color-table-heading-border-hover: rgb(255 255 255 / 20%);
    --color-table-row-background: transparent;
    --color-table-row-background-hover: rgb(255 255 255 / 4%);
    --color-table-row-background-selected: rgb(255 255 255 / 10%);
    --color-table-row-border: rgb(255 255 255 / 5%);
    --color-table-row-border-hover: rgb(255 255 255 / 1.5%);
    --color-table-row-border-selected: transparent;
    --color-table-row-border-faint: rgb(255 255 255 / 4%);

    --color-input-text: #fff;
    --color-input-background: #111;
    --color-input-background-hover: #000;
    --color-input-background-selected: #fff;
    --color-input-background-selected-hover: rgba(255 255 255 / 75%);
    --color-input-background-contrast: rgb(255 255 255 / 10%);
    --color-input-background-contrast-hover: rgb(255 255 255 / 15%);
    --color-input-border: #333;
    --color-input-border-hover: #444;
    --color-input-border-selected: transparent;

    --color-toggle-background: rgb(255 255 255 / 25%);
    --color-toggle-background-hover: rgb(255 255 255 / 30%);

    --color-radio-tab-group-background: rgb(255 255 255 / 5%);
    --color-radio-tab-group-border: rgb(255 255 255 / 2.5%);

    --color-radio-tab-background: transparent;
    --color-radio-tab-background-hover: rgb(255 255 255 / 4%);
    --color-radio-tab-border-hover: rgb(255 255 255 / 2%);
    --color-radio-tab-background-selected: rgb(255 255 255 / 10%);
    --color-radio-tab-border-selected: rgb(255 255 255 / 7.5%);

    --color-action-default: rgb(255 255 255 / 10%);
    --color-action-default-hover: rgb(255 255 255 / 15%);
    --color-action-default-contrast: var(--color-body-text);

    --color-action-primary: #e4e4e4;
    --color-action-primary-hover: #c4c4c4;
    --color-action-primary-contrast: #111;

    --color-action-outline: rgb(255 255 255 / 2.5%);
    --color-action-outline-hover: rgb(255 255 255 / 10%);
    --color-action-outline-contrast: var(--color-body-text);
    --color-action-outline-border: rgb(255 255 255 / 10%);

    --color-action-ghost: transparent;
    --color-action-ghost-hover: rgb(255 255 255 / 10%);
    --color-action-ghost-contrast: var(--color-body-text);

    --color-status-default: #3f3f46;
    --color-status-default-hover: #52525b;
    --color-status-default-text: #d1d5db;
    --color-status-default-border: #374151;
    --color-status-default-contrast: #fff;
    --color-status-default-faint: #27272a;
    --color-status-default-faint-hover: #3f3f46;
    --color-status-default-faint-contrast: #d1d5db;
    --color-status-default-faint-highlight: #52525b;

    --color-status-info: #3a62a5;
    --color-status-info-hover: #2563eb;
    --color-status-info-text: #93c5fd;
    --color-status-info-border: #1e3a8a;
    --color-status-info-contrast: #fff;
    --color-status-info-faint: #172554;
    --color-status-info-faint-hover: #1e3a8a;
    --color-status-info-faint-contrast: #bfdbfe;
    --color-status-info-faint-highlight: #1e40af;

    --color-status-success: #059669;
    --color-status-success-hover: #00af64;
    --color-status-success-text: #6ee7b7;
    --color-status-success-border: #064e3b;
    --color-status-success-contrast: #fff;
    --color-status-success-faint: #052e16;
    --color-status-success-faint-hover: #14532d;
    --color-status-success-faint-contrast: #a7f3d0;
    --color-status-success-faint-highlight: #065f46;

    --color-status-warning: #c2410c;
    --color-status-warning-hover: #ea580c;
    --color-status-warning-text: #fdba74;
    --color-status-warning-border: #78350f;
    --color-status-warning-contrast: #fff;
    --color-status-warning-faint: #451a03;
    --color-status-warning-faint-hover: #78350f;
    --color-status-warning-faint-contrast: #fed7aa;
    --color-status-warning-faint-highlight: #9a3412;

    --color-status-danger: #bd3030;
    --color-status-danger-hover: #e31010;
    --color-status-danger-text: #f87171;
    --color-status-danger-border: #7f1d1d;
    --color-status-danger-contrast: #fff;
    --color-status-danger-faint: #450a0a;
    --color-status-danger-faint-hover: #7f1d1d;
    --color-status-danger-faint-contrast: #fecaca;
    --color-status-danger-faint-highlight: #991b1b;

    --color-status-error: #b91c1c;
    --color-status-error-text: #f87171;

    --color-status-elevate: #4c1d95;
    --color-status-elevate-text: #fff;

    --color-status-elevated: #ae5f04;
    --color-status-elevated-text: #fff;

    --color-focus: #0369a1;
    --color-focus-contrast: #fff;
    --color-outline-focus: var(--color-background-faint-20);
    --color-outline-focus-visible: var(--color-focus);
    --color-outline-error: var(--color-status-error);

    --color-code-background: var(--color-background-faint-10);
    --color-code-text: var(--color-body-text);

    --shadow-sidebar-open: inset 0 0 0 1px rgb(255 255 255 / 5%);

    --control-opacity-disabled: 50%;
    --input-opacity-disabled: 50%;
    --input-icon-opacity-disabled: 33%;

    color-scheme: dark;
}

/* System (Light by default, Dark override) */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --color-background-faint: rgb(255 255 255 / 2.5%);
        --color-background-faint-5: rgb(255 255 255 / 5%);
        --color-background-faint-10: rgb(255 255 255 / 10%);
        --color-background-faint-15: rgb(255 255 255 / 15%);
        --color-background-faint-20: rgb(255 255 255 / 20%);

        --color-border-faint: rgb(255 255 255 / 2.5%);
        --color-border-faint-5: rgb(255 255 255 / 5%);
        --color-border-faint-10: rgb(255 255 255 / 10%);
        --color-border-faint-15: rgb(255 255 255 / 15%);
        --color-border-faint-20: rgb(255 255 255 / 20%);

        --filter-lighten-faint: brightness(110%);
        --filter-darken-faint: brightness(95%);

        --color-state-hover-lighten: rgb(255 255 255 / 15%);
        --color-state-hover-darken: rgb(0 0 0 / 15%);
        --color-state-hover: rgb(255 255 255 / 3%);
        --color-state-active: rgb(255 255 255 / 6%);
        --color-state-selected: rgb(255 255 255 / 8%);

        --color-body-background: #09090b;
        --color-body-text: #e5e5e5;
        --color-body-text-faint: #999;
        --color-body-text-highlight: #fff;

        --color-header-background: #111;
        --color-header-border: rgb(255 255 255 / 5%);

        --color-sidebar-open-background: #111;

        --color-content-background: #262626;
        --color-content-border: rgb(255 255 255 / 5%);

        --color-panel-background: #222;
        --color-panel-background-stacked: #333;
        --color-panel-border: rgb(255 255 255 / 7.5%);
        --color-panel-border-inset: rgb(255 255 255 / 7.5%);

        --color-collapsible-content-background: #222;
        --color-collapsible-content-background-hover: #333;
        --color-collapsible-content-border: rgb(255 255 255 / 2.5%);
        --color-collapsible-content-border-inset: rgb(255 255 255 / 7.5%);

        --color-overlay-background: rgb(0 0 0 / 75%);

        --color-link-text: #38bdf8;
        --color-link-text-hover: #7dd3fc;

        --color-body-text-decoration-faint: rgb(255 255 255 / 25%);
        --color-body-text-decoration-faint-hover: rgb(255 255 255 / 50%);

        --color-table-heading-background: #2b2b2b;
        --color-table-heading-background-hover: #2f2f2f;
        --color-table-heading-border: rgb(255 255 255 / 5%);
        --color-table-heading-border-hover: rgb(255 255 255 / 20%);
        --color-table-row-background: transparent;
        --color-table-row-background-hover: rgb(255 255 255 / 4%);
        --color-table-row-background-selected: rgb(255 255 255 / 10%);
        --color-table-row-border: rgb(255 255 255 / 5%);
        --color-table-row-border-hover: rgb(255 255 255 / 1.5%);
        --color-table-row-border-selected: transparent;
        --color-table-row-border-faint: rgb(255 255 255 / 4%);

        --color-input-text: #fff;
        --color-input-background: #111;
        --color-input-background-hover: #000;
        --color-input-background-selected: #fff;
        --color-input-background-selected-hover: rgba(255 255 255 / 75%);
        --color-input-background-contrast: rgb(255 255 255 / 10%);
        --color-input-background-contrast-hover: rgb(255 255 255 / 15%);
        --color-input-border: #333;
        --color-input-border-hover: #444;
        --color-input-border-selected: transparent;

        --color-toggle-background: rgb(255 255 255 / 25%);
        --color-toggle-background-hover: rgb(255 255 255 / 30%);

        --color-radio-tab-group-background: rgb(255 255 255 / 5%);
        --color-radio-tab-group-border: rgb(255 255 255 / 2.5%);

        --color-radio-tab-background: transparent;
        --color-radio-tab-background-hover: rgb(255 255 255 / 4%);
        --color-radio-tab-border-hover: rgb(255 255 255 / 2%);
        --color-radio-tab-background-selected: rgb(255 255 255 / 10%);
        --color-radio-tab-border-selected: rgb(255 255 255 / 7.5%);

        --color-action-default: rgb(255 255 255 / 10%);
        --color-action-default-hover: rgb(255 255 255 / 15%);
        --color-action-default-contrast: var(--color-body-text);

        --color-action-primary: #e4e4e4;
        --color-action-primary-hover: #c4c4c4;
        --color-action-primary-contrast: #111;

        --color-action-outline: transparent;
        --color-action-outline-hover: rgb(255 255 255 / 10%);
        --color-action-outline-contrast: var(--color-body-text);
        --color-action-outline-border: rgb(255 255 255 / 10%);

        --color-action-ghost: transparent;
        --color-action-ghost-hover: rgb(255 255 255 / 10%);
        --color-action-ghost-contrast: var(--color-body-text);

        --color-status-default: #3f3f46;
        --color-status-default-hover: #52525b;
        --color-status-default-text: #d1d5db;
        --color-status-default-border: #374151;
        --color-status-default-contrast: #fff;
        --color-status-default-faint: #27272a;
        --color-status-default-faint-hover: #3f3f46;
        --color-status-default-faint-contrast: #d1d5db;
        --color-status-default-faint-highlight: #52525b;

        --color-status-info: #3a62a5;
        --color-status-info-hover: #2563eb;
        --color-status-info-text: #93c5fd;
        --color-status-info-border: #1e3a8a;
        --color-status-info-contrast: #fff;
        --color-status-info-faint: #172554;
        --color-status-info-faint-hover: #1e3a8a;
        --color-status-info-faint-contrast: #bfdbfe;
        --color-status-info-faint-highlight: #1e40af;

        --color-status-success: #059669;
        --color-status-success-hover: #00af64;
        --color-status-success-text: #6ee7b7;
        --color-status-success-border: #064e3b;
        --color-status-success-contrast: #fff;
        --color-status-success-faint: #052e16;
        --color-status-success-faint-hover: #14532d;
        --color-status-success-faint-contrast: #a7f3d0;
        --color-status-success-faint-highlight: #065f46;

        --color-status-warning: #c2410c;
        --color-status-warning-hover: #ea580c;
        --color-status-warning-text: #fdba74;
        --color-status-warning-border: #78350f;
        --color-status-warning-contrast: #fff;
        --color-status-warning-faint: #451a03;
        --color-status-warning-faint-hover: #78350f;
        --color-status-warning-faint-contrast: #fed7aa;
        --color-status-warning-faint-highlight: #9a3412;

        --color-status-danger: #bd3030;
        --color-status-danger-hover: #e31010;
        --color-status-danger-text: #f87171;
        --color-status-danger-border: #7f1d1d;
        --color-status-danger-contrast: #fff;
        --color-status-danger-faint: #450a0a;
        --color-status-danger-faint-hover: #7f1d1d;
        --color-status-danger-faint-contrast: #fecaca;
        --color-status-danger-faint-highlight: #991b1b;

        --color-status-error: #b91c1c;
        --color-status-error-text: #f87171;

        --color-status-elevate: #4c1d95;
        --color-status-elevate-text: #fff;

        --color-status-elevated: #ae5f04;
        --color-status-elevated-text: #fff;

        --color-focus: #0369a1;
        --color-focus-contrast: #fff;
        --color-outline-focus: var(--color-background-faint-20);
        --color-outline-focus-visible: var(--color-focus);
        --color-outline-error: var(--color-status-error);

        --color-code-background: var(--color-background-faint-10);
        --color-code-text: var(--color-body-text);

        --shadow-sidebar-open: inset 0 0 0 1px rgb(255 255 255 / 5%);

        --control-opacity-disabled: 50%;
        --input-opacity-disabled: 50%;
        --input-icon-opacity-disabled: 33%;

        color-scheme: dark;
    }
}