@layer components {
  /* Shared skeuomorphic primary button — warm gradient pill with dome highlight */
  .skeuo-btn-primary {
    border: none;
    background: var(--skeuo-dome-highlight), var(--gradient-action-primary-rest);
    color: white;
    box-shadow:
      var(--btn-shadow-rest),
      inset 0 1px 0 var(--color-highlight-15),
      inset 0 -1px 2px var(--color-shadow-a12);
  }

  .skeuo-btn-primary:hover {
    background: var(--skeuo-dome-highlight),
      var(--gradient-action-primary-hover);
    box-shadow: var(--btn-shadow-hover);
  }

  .skeuo-btn-primary:active {
    box-shadow:
      var(--btn-shadow-active),
      inset 0 2px 4px var(--color-shadow-a20);
  }
}