/* Дефолты на случай, если palette.js ещё не отработал или заблокирован —
   виджет не должен выглядеть сломанным без JS. */
:root {
    --ut-bg: #f7f7f8;
    --ut-surface: #ffffff;
    --ut-surface-2: #f0f0f2;
    --ut-text: #18181b;
    --ut-muted: #6b7280;
    --ut-border: #e2e2e6;
    --ut-accent: #2563eb;
    --ut-accent-fg: #ffffff;
    --ut-accent-soft: rgba(37, 99, 235, .12);
    --ut-success: #16a34a;
    --ut-warning: #ca8a04;
    --ut-danger: #dc2626;
    --ut-radius: 14px;
    --ut-radius-sm: 8px;
    --ut-gap: 1rem;
    --ut-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --ut-bg: #18181b;
        --ut-surface: #232326;
        --ut-surface-2: #2b2b30;
        --ut-text: #e4e4e7;
        --ut-muted: #9a9aa2;
        --ut-border: #3a3a40;
        --ut-accent: #5b9dff;
        --ut-accent-fg: #0c1220;
        --ut-accent-soft: rgba(91, 157, 255, .16);
        --ut-success: #4ade80;
        --ut-warning: #facc15;
        --ut-danger: #f87171;
        --ut-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    }
}

.ut-tool,
.ut-tool * {
    box-sizing: border-box;
}

.ut-tool {
    background: var(--ut-bg);
    color: var(--ut-text);
}

.ut-tool :focus-visible {
    outline: 2px solid var(--ut-accent);
    outline-offset: 2px;
}

.ut-tool--missing {
    padding: 1em;
    border: 1px dashed var(--ut-danger);
    border-radius: var(--ut-radius-sm);
    color: var(--ut-danger);
    font-size: .9em;
}