/**
 * Signal Dot Component Styles
 * 
 * 5-level diverging scale:
 *   under → under-slight → optimal → over-slight → over
 *   (purple)   (blue)      (green)    (yellow)     (red)
 */

.signal-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* Under range (cool tones) */
.signal-dot--under {
    background: var(--signal-under);
}

.signal-dot--under-slight {
    background: var(--signal-under-slight);
}

/* Optimal (in range) */
.signal-dot--optimal {
    background: var(--signal-optimal);
}

/* Over range (warm tones) */
.signal-dot--over-slight {
    background: var(--signal-over-slight);
}

.signal-dot--over {
    background: var(--signal-over);
}