@layer utility {

  /* Base button — use with .btn-primary or .btn-secondary */
  .btn-primary,
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6);
    font-family: var(--font-arimo);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-sm);
    border: none;
    cursor: pointer;
    transition:
      background-color var(--transition-medium),
      color var(--transition-medium),
      border-color var(--transition-medium),
      box-shadow var(--transition-medium),
      transform var(--transition-medium);
    text-decoration: none;
  }

  /* Primary: gold fill, white text, subtle shadow (e.g. phone CTA) */
  .btn-primary {
    background-color: var(--color-accent-base);
    color: var(--color-bg-secondary);
    box-shadow: var(--box-shadow-md);
  }

  .btn-primary:hover {
    background-color: var(--color-accent-hover);
    transform: scale(var(--scale-hover));
  }

  .btn-primary:active {
    background-color: var(--color-accent-active);
    transform: scale(var(--scale-active));
  }

  .btn-primary:focus-visible {
    outline: 2px solid var(--color-accent-focus);
    outline-offset: 2px;
  }

  .btn-primary:disabled {
    background-color: var(--color-accent-disabled);
    color: var(--color-text-muted);
    cursor: not-allowed;
    box-shadow: none;
  }

  /* Secondary: transparent bg, gold text + border, soft gold glow (e.g. View All Services) */
  .btn-secondary {
    background-color: transparent;
    color: var(--color-accent-base);
    border: var(--border-width-md) solid var(--color-accent-base);
    box-shadow: 0 0 0 0 var(--color-accent-base),
      0 4px 14px rgba(205, 162, 55, 0.22);
  }

  .btn-secondary:hover {
    border-color: var(--color-accent-hover);
    color: var(--color-accent-hover);
    box-shadow: 0 0 0 0 var(--color-accent-hover),
      0 4px 14px rgba(205, 162, 55, 0.22);
    transform: scale(var(--scale-hover));
  }

  .btn-secondary:active {
    background-color: var(--color-accent-soft);
    border-color: var(--color-accent-active);
    color: var(--color-accent-active);
    transform: scale(var(--scale-active));
  }

  .btn-secondary:focus-visible {
    outline: 2px solid var(--color-accent-focus);
    outline-offset: 2px;
  }

  .btn-secondary:disabled {
    border-color: var(--color-accent-disabled);
    color: var(--color-accent-disabled);
    cursor: not-allowed;
    box-shadow: none;
  }

}