/* ============================================================
   COMPONENT · LED
   Jewel indicator light. Pure CSS — radial gradient body,
   colored glow halo, optional label.
   ============================================================ */

.c-led {
  --led-color: var(--c-bezel-light);
  --led-glow:  transparent;

  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--radius-circle);
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--led-color) 90%, white) 0%,
      var(--led-color) 50%,
      color-mix(in srgb, var(--led-color) 40%, black) 100%);
  box-shadow:
    inset 0 0 2px rgba(0,0,0,0.5),
    0 0 0 1px var(--color-bezel-dark),
    0 0 6px var(--led-glow),
    0 0 12px var(--led-glow);
  vertical-align: middle;
}

.c-led--ok      { --led-color: var(--color-ok);      --led-glow: color-mix(in srgb, var(--color-ok)      60%, transparent); }
.c-led--info    { --led-color: var(--color-info);    --led-glow: color-mix(in srgb, var(--color-info)    60%, transparent); }
.c-led--caution { --led-color: var(--color-caution); --led-glow: color-mix(in srgb, var(--color-caution) 60%, transparent); }
.c-led--alert   { --led-color: var(--color-alert);   --led-glow: color-mix(in srgb, var(--color-alert)   60%, transparent); }
.c-led--danger  { --led-color: var(--color-danger);  --led-glow: color-mix(in srgb, var(--color-danger)  60%, transparent); }
.c-led--hazard  { --led-color: var(--color-hazard);  --led-glow: color-mix(in srgb, var(--color-hazard)  60%, transparent); }
.c-led--power   { --led-color: var(--c-paper);       --led-glow: color-mix(in srgb, var(--c-paper)       50%, transparent); }
.c-led--off     { --led-color: var(--c-bezel-dark);  --led-glow: transparent; }

.c-led--lg { width: 1.25rem; height: 1.25rem; }
.c-led--sm { width: 0.55rem; height: 0.55rem; }

.c-led--blink  { animation: blink 1s steps(2, end) infinite; }
.c-led--pulse  { animation: pulse-glow 1.6s var(--ease-pulse) infinite; }

/* LED with engraved caption underneath */
.c-led-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.c-led-stack__label {
  font-family: var(--font-plaque);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}