:root {
   --btn-primary: var(--primary, #0E7C86);
   --btn-primary-dark: var(--primary-dark, #095c63);
   --btn-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0,0,0,0.05));
   --btn-radius: var(--radius-md, 8px);
}

/* Primary button baseline (dashboard style) */
.btn,
.btn-primary,
.button,
#shareButton,
.upgrade-button {
   width: 100%;
   padding: 0.875rem 1.5rem;
   font-size: 1rem;
   font-weight: 600;
   font-family: inherit;
   color: #fff;
   background: linear-gradient(135deg, var(--btn-primary) 0%, var(--btn-primary-dark) 100%);
   border: none;
   border-radius: var(--btn-radius);
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: var(--btn-shadow);
   min-height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   gap: 0.5rem;
}

/* Opt-out helper for inline buttons */
.btn-inline {
   width: auto;
   min-width: unset;
   display: inline-flex;
}

.btn-primary,
.btn {
   background: linear-gradient(135deg, var(--btn-primary) 0%, var(--btn-primary-dark) 100%);
}

.btn-secondary,
.btn.btn-secondary {
   background: #fff;
   color: var(--text-primary, #1f2937);
   border: 1px solid var(--border-color, #e5e7eb);
   box-shadow: none;
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
   background: var(--bg-muted, #f7fafc);
   color: var(--text-primary, #1f2937);
   border-color: var(--border-color, #e5e7eb);
   box-shadow: var(--btn-shadow);
   transform: translateY(-1px);
}

.btn-secondary:active,
.btn.btn-secondary:active {
   transform: translateY(0);
   box-shadow: var(--btn-shadow);
}

.btn:hover,
.btn-primary:hover,
.button:hover,
#shareButton:hover,
.upgrade-button:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 6px rgba(14, 124, 134, 0.3);
   background: linear-gradient(135deg, var(--btn-primary-dark) 0%, #074a50 100%);
}

.btn:active,
.btn-primary:active,
.button:active,
#shareButton:active,
.upgrade-button:active {
   transform: translateY(0);
   box-shadow: var(--btn-shadow);
}

.btn:focus,
.btn-primary:focus,
.button:focus,
#shareButton:focus,
.upgrade-button:focus {
   outline: 2px solid var(--btn-primary);
   outline-offset: 2px;
}

.btn:disabled,
.btn-primary:disabled,
.button:disabled,
#shareButton:disabled,
.upgrade-button:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   transform: none;
}

.btn-small {
   padding: 0.5rem 1rem;
   font-size: 0.95rem;
   min-height: 36px;
}

@media (max-width: 767px) {
   .btn,
   .btn-primary,
   .button,
   #shareButton,
   .upgrade-button {
      font-size: 0.9375rem;
      padding: 0.75rem 1.25rem;
   }
}

@media (prefers-reduced-motion: reduce) {
   .btn,
   .btn-primary,
   .button,
   #shareButton,
   .upgrade-button {
      transition: none;
   }
   
   .btn:hover,
   .btn-primary:hover,
   .button:hover,
   #shareButton:hover,
   .upgrade-button:hover {
      transform: none;
   }
}