/* ============================================================
   Hitz DS — primitive-menu-tabs — .tabs
   Canonical importable CSS. Extracted from primitives/primitive-menu-tabs.html.
   Tokens only (tokens-all.css). Consume via <link>/@import; never copy-paste.
   ============================================================ */


  .tabs {
    display: inline-flex;
    border-radius: var(--radius-lg);          /* radius-lg — track */
    padding: var(--space-1);
    gap: var(--space-1);
  }

  .tabs.dk { background: var(--color-secondary-dark); }
   /* color-secondary-dark track */
  .tabs.lt { background: var(--color-tertiary-light); }
   /* color-tertiary-light track */
  .tabs button {
    font-family: var(--font-ui);
    font-size: var(--text-label-size);
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);          /* radius-md — selected chip */
    border: none;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition:
      background var(--dur-snap) var(--ease-out),
      transform  var(--dur-spring) var(--ease-spring);
    transform-origin: center;
  }

  .tabs button.popping {
    animation: tab-pop var(--dur-spring) var(--ease-spring) forwards;
  }

  .tabs.dk button { color: var(--color-tertiary); }

  .tabs.lt button { color: var(--color-secondary); }

  .tabs.dk button.active { background: var(--color-secondary-medium); }
   /* color-secondary-medium */
  .tabs.lt button.active { background: var(--color-tertiary-medium); }

/* keyframes */


  @keyframes tab-pop {
    0%   { transform: scale(0.88); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); }
  }