/* website/static/css/components/buttons.css */

/* ------------------------------------------------------------
   GLOBAL BUTTON SYSTEM (Unified + Theme-Aware + Luxury Motion)
   website/static/css/components/buttons.css
------------------------------------------------------------
   PURPOSE:
   A single, elegant, theme-aware button system used across the
   entire application. Buttons automatically adapt to all themes
   and follow the global variable architecture.

   VARIANTS INCLUDED:
   ✓ Base button
   ✓ Filled
   ✓ Outline
   ✓ Glow
   ✓ Semantic colors (primary, secondary, accent, success, danger, etc.)

   GOALS:
   - Zero hardcoded colors
   - 100% variable-driven
   - Consistent radius, shadows, transitions
   - Smooth hover motion
------------------------------------------------------------ */


/* ============================================================
   1) BASE BUTTON
============================================================ */
.btn {
  font-family: var(--font-family-base);
  font-weight: 600;

  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-base);

  cursor: pointer;
  background: transparent;

  border: 1px solid var(--color-light);
  color: var(--color-light);

  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}


/* Hover */
.btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}


/* Disabled */
.btn.disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}



/* ============================================================
   2) FILLED VARIANT
============================================================ */
.btn-filled {
  background: var(--color-light);
  color: var(--color-dark);
  border-color: var(--color-light);
}



/* ============================================================
   3) OUTLINE VARIANT
============================================================ */
.btn-outline {
  background: transparent;
  border: 2px solid var(--color-light);
  color: var(--color-light);
}



/* ============================================================
   4) GLOW VARIANT
============================================================ */
.btn-glow {
  background: var(--color-light);
  color: var(--color-dark);
  border-color: var(--color-light);
  box-shadow: 0 0 12px var(--color-light);
}



/* ============================================================
   5) SEMANTIC COLOR VARIANTS
   (Primary, Secondary, Accent, Success, Danger, Warning, Info)
============================================================ */

/* Helper mixin-like pattern */
.btn-primary,
.btn-secondary,
.btn-accent,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
  border-color: currentColor;
  color: currentColor;
}

/* Filled + Glow override backgrounds */
.btn-primary.btn-filled,
.btn-primary.btn-glow {
  background: var(--color-primary);
  color: var(--color-dark);
  box-shadow: 0 0 12px var(--color-primary);
}

.btn-secondary.btn-filled,
.btn-secondary.btn-glow {
  background: var(--color-secondary);
  color: var(--color-dark);
  box-shadow: 0 0 12px var(--color-secondary);
}

.btn-accent.btn-filled,
.btn-accent.btn-glow {
  background: var(--color-accent);
  color: var(--color-dark);
  box-shadow: 0 0 12px var(--color-accent);
}

.btn-success.btn-filled,
.btn-success.btn-glow {
  background: var(--color-success);
  color: var(--color-dark);
  box-shadow: 0 0 12px var(--color-success);
}

.btn-danger.btn-filled,
.btn-danger.btn-glow {
  background: var(--color-danger);
  color: var(--color-dark);
  box-shadow: 0 0 12px var(--color-danger);
}

.btn-warning.btn-filled,
.btn-warning.btn-glow {
  background: var(--color-warning);
  color: var(--color-dark);
  box-shadow: 0 0 12px var(--color-warning);
}

.btn-info.btn-filled,
.btn-info.btn-glow {
  background: var(--color-info);
  color: var(--color-dark);
  box-shadow: 0 0 12px var(--color-info);
}