@layer components {
  .specs[data-variant="dark"] {
    background: var(--color-dark-bg); color: var(--color-dark-text);
    --color-text-muted: var(--color-dark-muted); --color-border: var(--color-dark-border);
  }
  .specs__list { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); margin: 0; }
  .specs__item { display: grid; gap: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
  .specs__label { font-size: var(--font-size-small); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
  .specs__value { margin: 0; font: 300 var(--step-3) / 1 var(--font-display); letter-spacing: var(--tracking-tight-display); }
  .specs__unit { margin-inline-start: var(--space-2); font: 500 var(--font-size-small) var(--font-body); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
}