/**
 * Global reset, typography, and layout utilities.
 * Depends on themes.css.
 */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--wf-font-sans);
    font-size: var(--wf-text-base);
    background: var(--wf-bg-page);
    color: var(--wf-text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Visibility (prefer classes over inline style="display:none") */
.is-hidden,
[hidden] {
    display: none !important;
}

/* Header control cluster (dark / layout toggles) */
.header-controls {
    display: flex;
    align-items: center;
    gap: var(--wf-space-xs);
}

/* Compact empty/loading states (drawers, accordions) */
.info-message--compact {
    padding: var(--wf-space-xs) 0.625rem;
    font-size: var(--wf-text-xs);
}

.info-message--compact-lg {
    padding: var(--wf-space-sm);
    font-size: var(--wf-text-xs);
}

/* Settings / stat monospace values */
.stat-value--sm {
    font-size: var(--wf-text-sm);
}

.section-title--spaced {
    margin-top: var(--wf-space-lg);
}

.status-message--spaced {
    margin-top: var(--wf-space-sm);
}

.stat-value--critical {
    color: var(--wf-danger);
}

.stat-value--warn {
    color: var(--wf-warn);
}