/* =============================================================================
   Button System — Dank & Shrooms Child Theme
   =============================================================================
   Architecture:
     button (element reset)
       └── [optional] .btn              structural base class
                  ├── .btn-cta          primary filled CTA (alias: .btn-primary)
                  ├── .btn-secondary    outlined, light background
                  ├── .btn-outline      transparent with subtle border
                  └── .btn-ghost        frosted/translucent surface

     .btn-hero-primary                  hero section primary CTA (over dark bg)
     .btn-hero-secondary                hero section secondary CTA (glass effect)

   Conventions:
     - All colors use --ds-* design-system tokens. No hardcoded hex values.
     - Spacing/border-radius are fixed here; use Tailwind utilities on the
       element to add layout overrides (width, margin, flex-shrink, etc.).
     - Tailwind preflight is disabled, so every <button> element needs an
       explicit border reset — that is applied globally in Section 1 below.
     - !important is used ONLY on hero buttons to beat Elementor-generated
       inline styles without resorting to element IDs or deep selectors.
     - Component-scoped buttons (WooCommerce account, cart, checkout, newsletter)
       use their own scoped selectors in their respective component CSS files.
       They build on the token layer established here rather than repeating it.

   Extending:
     Add new variants as .btn-{variant} here before adding component-scoped rules.
   ============================================================================= */


/* ---------------------------------------------------------------------------
   1. Universal button element reset
      Eliminates the UA black/grey outset border that persists when Tailwind
      preflight is disabled.
   --------------------------------------------------------------------------- */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-element-button {
	border: 0;
	cursor: pointer;
}


/* ---------------------------------------------------------------------------
   2. .btn — structural base class
      Apply to any <button> or <a> acting as a button for consistent baseline
      layout. Does not set color or border — extend with a variant below.
   --------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 42px;
	padding: 0.55rem 1rem;
	border: 0;
	border-radius: 9px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}


/* ---------------------------------------------------------------------------
   3. .btn-cta / .btn-primary — primary filled button
      Use on light backgrounds. .btn-primary is a direct alias so shortcode
      templates using either class get the same result.
   --------------------------------------------------------------------------- */
.btn-cta,
.btn-primary {
	background: var(--ds-primary);
	color: var(--ds-bg);
	border: 1px solid var(--ds-primary);
	border-radius: 9px;
}

.btn-cta:hover,
.btn-cta:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--ds-primary-hover);
	border-color: var(--ds-primary-hover);
	color: var(--ds-bg);
	outline: none;
	transform: translateY(-1px);
}

.btn-cta:active,
.btn-primary:active {
	transform: none;
}


/* ---------------------------------------------------------------------------
   4. .btn-secondary — outlined button with light background
   --------------------------------------------------------------------------- */
.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0.55rem 0.95rem;
	background: var(--ds-surface);
	color: var(--ds-primary);
	border: 1px solid var(--ds-border);
	border-radius: 9px;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
	border-color: var(--ds-primary);
	color: var(--ds-primary-dark);
	background: var(--ds-bg);
	outline: none;
}


/* ---------------------------------------------------------------------------
   5. .btn-outline — transparent button with subtle border
   --------------------------------------------------------------------------- */
.btn-outline {
	background: transparent;
	color: var(--ds-text);
	border: 1px solid rgb(var(--ds-text-rgb) / 0.14);
	border-radius: 9px;
}

.btn-outline:hover,
.btn-outline:focus-visible {
	border-color: rgb(var(--ds-text-rgb) / 0.28);
	background: rgb(var(--ds-surface-rgb) / 0.6);
	outline: none;
}


/* ---------------------------------------------------------------------------
   6. .btn-ghost — frosted/translucent button (light backgrounds)
   --------------------------------------------------------------------------- */
.btn-ghost {
	background: rgb(var(--ds-surface-rgb) / 0.9);
	color: var(--ds-text);
	border: 1px solid transparent;
	border-radius: 9px;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
	background: var(--ds-surface);
	border-color: var(--ds-border);
	outline: none;
}


/* ---------------------------------------------------------------------------
   7. .btn-warning — attention-grabbing button for warnings or important actions
   --------------------------------------------------------------------------- */
.btn-warning {
	background: var(--ds-error);
	color: var(--ds-surface);
	border: 1px solid transparent;
	border-radius: 9px;
}

.btn-warning:hover,
.btn-warning:focus-visible {
	background: var(--ds-accent);
	outline: none;
}


/* ---------------------------------------------------------------------------
   8. Disabled state — applies to all .btn* variants
   --------------------------------------------------------------------------- */
.btn[disabled],
.btn.disabled,
.btn-cta[disabled],
.btn-primary[disabled],
.btn-secondary[disabled],
.btn-outline[disabled],
.btn-ghost[disabled],
.btn-warning[disabled],
.btn-hero-primary[disabled],
.btn-hero-secondary[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
	transform: none !important;
}