/* Atoms: buttons, badges, pills, values. Solid fills, one radius per role. */
.de-btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    line-height: 1.2;
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: filter 120ms ease;
}
.de-btn:hover { filter: brightness(0.9); text-decoration: none; }
.de-btn-primary, .de-btn-primary:hover { background: var(--color-primary); color: var(--color-on-primary); }
.de-btn-secondary, .de-btn-secondary:hover { background: var(--color-accent); color: var(--color-on-accent); }
.de-btn-ghost, .de-btn-ghost:hover { background: var(--color-surface-raised); color: var(--color-text); }

.de-badge {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 0.15em 0.75em;
    border-radius: var(--radius-pill);
    background: var(--color-surface-raised);
    color: var(--color-text);
    line-height: 1.5;
}
.de-badge-good { background: var(--color-success); color: var(--color-on-primary); }
.de-badge-warn { background: var(--color-accent); color: var(--color-on-accent); }
.de-badge-bad { background: var(--color-danger); color: #ffffff; }
.de-badge-info { background: var(--color-primary); color: var(--color-on-primary); }

.de-pill {
    display: inline-flex;
    gap: var(--space-2);
    align-items: baseline;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: var(--text-sm);
}
.de-pill-label { color: var(--color-text-muted); font-weight: 600; }
.de-pill-value { font-weight: 700; }

.de-unit { font-size: 0.85em; color: var(--color-text-muted); font-weight: 600; }
.de-dash { color: var(--color-text-muted); }
.de-yes { color: var(--color-success); font-weight: 700; }
.de-no { color: var(--color-danger); font-weight: 700; }