@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * SPOTLIGHT
 *
 * The one focal value of a screen: 32px bold, default text colour (never the accent), with a
 * caveat line (14px, warning text) directly under it. Liveness is a status dot and word above the value.
 * ======================================== */

  .cinder-spotlight {
    display: grid;
    gap: var(--cinder-space-1);
    justify-items: start;
  }

  .cinder-spotlight__value {
    margin: 0;
    font-size: 2rem;
    font-weight: var(--cinder-font-bold);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--cinder-text-default);
    text-wrap: balance;
  }

  .cinder-spotlight__caveat {
    margin: 0;
    font-size: var(--cinder-text-base);
    color: var(--cinder-status-warning-text);
  }

  /* The liveness word sits at label size (16px). */
  .cinder-status-dot.cinder-spotlight__status {
    font-size: var(--cinder-text-lg);
  }
}