html[data-ario-theme="light"] { color-scheme: light; }
html[data-ario-theme="dark"] { color-scheme: dark; }

html[data-ario-density="compact"] .mud-nav-link,
html[data-ario-density="compact"] .mud-table-cell,
html[data-ario-density="compact"] .mud-table-head .mud-table-cell,
html[data-ario-density="compact"] .mud-input-control,
html[data-ario-density="compact"] .mud-card-content,
html[data-ario-density="compact"] .mud-toolbar,
html[data-ario-density="compact"] .mud-expansion-panel-header {
    padding-top: 6px;
    padding-bottom: 6px;
}

html[data-ario-motion="reduced"] *,
html[data-ario-motion="reduced"] *::before,
html[data-ario-motion="reduced"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-ario-motion="system"] *,
    html[data-ario-motion="system"] *::before,
    html[data-ario-motion="system"] *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

.ario-main-content { width: 100%; min-width: 0; }
.ario-main-content.ario-content-contained { max-width: 1440px; margin-inline: auto; }
.ario-accent-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ario-accent-option { min-height: 40px; text-transform: none; }
.ario-accent-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; margin-right: 6px; border: 1px solid rgba(0,0,0,.18); }
.ario-appearance-status { display: flex; align-items: center; min-height: 24px; color: var(--mud-palette-text-secondary); }
.ario-appearance-card:focus-within { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

@media (max-width: 599.98px) {
    .ario-main-content { padding-inline: 8px; }
    .ario-accent-option { flex: 1 1 calc(50% - 8px); }
}

:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
