@layer utilities {
  /* Spacing utilities using design system tokens */
  .space-stack-xs > * + * { margin-top: var(--space-xs); }
  .space-stack-sm > * + * { margin-top: var(--space-sm); }
  .space-stack-md > * + * { margin-top: var(--space-md); }
  .space-stack-lg > * + * { margin-top: var(--space-lg); }
  .space-stack-xl > * + * { margin-top: var(--space-xl); }
  
  /* Margin utilities */
  .m-xs { margin: var(--space-xs); }
  .m-sm { margin: var(--space-sm); }
  .m-md { margin: var(--space-md); }
  .m-lg { margin: var(--space-lg); }
  .m-xl { margin: var(--space-xl); }
  .m-2xl { margin: var(--space-2xl); }
  
  /* Margin vertical utilities */
  .my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
  .my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
  .my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
  .my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
  .my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
  
  /* Gap utilities */
  .gap-xs { gap: var(--space-xs); }
  .gap-sm { gap: var(--space-sm); }
  .gap-md { gap: var(--space-md); }
  .gap-lg { gap: var(--space-lg); }
  .gap-xl { gap: var(--space-xl); }
  
  /* Component-specific utilities */
  .tour-component { margin: var(--component-margin); }
  .tour-section { padding: var(--space-lg) 0; }
  .tour-content { gap: var(--content-gap); }
  
  /* Color utilities */
  .text-heading { color: var(--color-heading); }
  .text-body { color: var(--color-body); }
  .text-muted { color: var(--color-muted); }
  .text-success { color: var(--color-success); }
  .text-error { color: var(--color-error); }
  .text-warning { color: var(--color-warning); }
  .text-info { color: var(--color-info); }
  
  /* Background utilities */
  .bg-surface { background-color: var(--color-background); }
  .bg-white { background-color: var(--color-background); }
  
  /* Border utilities */
  .border-default { border-color: var(--color-border); }
  .border-success { border-color: var(--color-success); }
  .border-error { border-color: var(--color-error); }
  
  /* Typography utilities */
  .font-display { font-family: var(--font-display); }
  .font-body { font-family: var(--font-body); }
  .font-mono { font-family: var(--font-mono); }
  
  .font-regular { font-weight: var(--weight-regular); }
  .font-medium { font-weight: var(--weight-medium); }
  .font-semibold { font-weight: var(--weight-semibold); }
  .font-bold { font-weight: var(--weight-bold); }
  
  .lh-body { line-height: var(--lh-body); }
  
  /* Layout utilities */
  .section-gap { gap: var(--section-gap); }
  .content-gap { gap: var(--content-gap); }
  
  /* Flexbox utilities with design system gaps */
  .flex-col-xs { display: flex; flex-direction: column; gap: var(--space-xs); }
  .flex-col-sm { display: flex; flex-direction: column; gap: var(--space-sm); }
  .flex-col-md { display: flex; flex-direction: column; gap: var(--space-md); }
  .flex-col-lg { display: flex; flex-direction: column; gap: var(--space-lg); }
  .flex-col-xl { display: flex; flex-direction: column; gap: var(--space-xl); }

  /* Bootstrap Icons spin animation (replacement for fa-spin) */
  @keyframes bi-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .bi-spin {
    animation: bi-spin 1s linear infinite;
    display: inline-block;
  }
}