/************************************************************
 * MARKSMAN DIGITAL MEDIA – BUTTON SYSTEM
 * 
 * Complete button component library with easy-to-use classes.
 * Mix and match: base class + variant + size + optional modifiers
 * 
 * Usage: 
 * <a class="mdm-btn mdm-btn-primary">Click Me</a>
 * <a class="mdm-btn mdm-btn-secondary mdm-btn-lg">Large Button</a>
 * 
 * Last Updated: 2025-01-09
 ************************************************************/

/* ==========================================
   BASE BUTTON STYLES
   ========================================== */

.mdm-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  
  /* Spacing - default medium size */
  padding: 0.75rem 1.5rem;
  
  /* Typography */
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  
  /* Appearance */
  border: 2px solid transparent;
  border-radius: 999px; /* pill shape */
  cursor: pointer;
  
  /* Behavior */
  transition: all 0.2s ease;
  user-select: none;
  -webkit-appearance: none;
  
  /* Remove default button styles */
  background: none;
  
  /* Ensure proper box model */
  box-sizing: border-box;
}

.mdm-btn:focus-visible {
  outline: 3px solid var(--theme-palette-color-3);
  outline-offset: 2px;
}

.mdm-btn:disabled,
.mdm-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ==========================================
   BUTTON VARIANTS (Colors/Styles)
   ========================================== */

/* PRIMARY - Orange solid button */
.mdm-btn-primary {
  background: var(--theme-palette-color-2); /* #FD9E02 */
  color: var(--theme-palette-color-8); /* white */
  border-color: var(--theme-palette-color-2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.mdm-btn-primary:hover {
  background: var(--theme-palette-color-1); /* #FB8500 darker orange */
  border-color: var(--theme-palette-color-1);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.mdm-btn-primary:active {
  transform: translateY(0);
}


/* SECONDARY - Navy solid button */
.mdm-btn-secondary {
  background: var(--theme-palette-color-4); /* #023047 navy */
  color: var(--theme-palette-color-8); /* white */
  border-color: var(--theme-palette-color-4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.mdm-btn-secondary:hover {
  background: var(--theme-palette-color-3); /* #3A4F66 lighter navy */
  border-color: var(--theme-palette-color-3);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.mdm-btn-secondary:active {
  transform: translateY(0);
}


/* OUTLINE - Orange outline button (ghost) */
.mdm-btn-outline {
  background: transparent;
  color: var(--theme-palette-color-2);
  border-color: var(--theme-palette-color-2);
}

.mdm-btn-outline:hover {
  background: var(--theme-palette-color-2);
  color: var(--theme-palette-color-8);
  transform: translateY(-2px);
}


/* OUTLINE SECONDARY - Navy outline button */
.mdm-btn-outline-secondary {
  background: transparent;
  color: var(--theme-palette-color-4);
  border-color: var(--theme-palette-color-4);
}

.mdm-btn-outline-secondary:hover {
  background: var(--theme-palette-color-4);
  color: var(--theme-palette-color-8);
  transform: translateY(-2px);
}


/* OUTLINE WHITE - White outline (for dark backgrounds) */
.mdm-btn-outline-white {
  background: transparent;
  color: var(--theme-palette-color-8);
  border-color: var(--theme-palette-color-8);
}

.mdm-btn-outline-white:hover {
  background: var(--theme-palette-color-8);
  color: var(--theme-palette-color-4);
  transform: translateY(-2px);
}


/* TEXT ONLY - Link style button */
.mdm-btn-text {
  background: transparent;
  color: var(--theme-palette-color-2);
  border: none;
  padding: 0.5rem 0.75rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.mdm-btn-text:hover {
  color: var(--theme-palette-color-1);
  text-decoration-thickness: 2px;
  transform: none;
}


/* LIGHT - Light gray button */
.mdm-btn-light {
  background: var(--theme-palette-color-6); /* #f2f5f7 */
  color: var(--theme-palette-color-4);
  border-color: var(--theme-palette-color-6);
}

.mdm-btn-light:hover {
  background: var(--theme-palette-color-5); /* #e1e8ed */
  border-color: var(--theme-palette-color-5);
  transform: translateY(-2px);
}


/* SUCCESS - Green button (for confirmations) */
.mdm-btn-success {
  background: #10b981;
  color: var(--theme-palette-color-8);
  border-color: #10b981;
}

.mdm-btn-success:hover {
  background: #059669;
  border-color: #059669;
  transform: translateY(-2px);
}


/* DANGER - Red button (for destructive actions) */
.mdm-btn-danger {
  background: #ef4444;
  color: var(--theme-palette-color-8);
  border-color: #ef4444;
}

.mdm-btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  transform: translateY(-2px);
}


/* ==========================================
   BUTTON SIZES
   ========================================== */

/* EXTRA SMALL */
.mdm-btn-xs {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  gap: 0.25rem;
}

/* SMALL */
.mdm-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  gap: 0.375rem;
}

/* MEDIUM (default - no class needed) */
/* Already defined in .mdm-btn base */

/* LARGE */
.mdm-btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  gap: 0.625rem;
}

/* EXTRA LARGE */
.mdm-btn-xl {
  padding: 1.25rem 2.5rem;
  font-size: 1.25rem;
  gap: 0.75rem;
}


/* ==========================================
   BUTTON SHAPES
   ========================================== */

/* PILL (default - already set in base) */

/* ROUNDED */
.mdm-btn-rounded {
  border-radius: 8px;
}

/* SQUARE */
.mdm-btn-square {
  border-radius: 4px;
}

/* SHARP (no rounding) */
.mdm-btn-sharp {
  border-radius: 0;
}


/* ==========================================
   BUTTON WIDTHS
   ========================================== */

/* FULL WIDTH */
.mdm-btn-block {
  display: flex;
  width: 100%;
}

/* AUTO WIDTH (shrink to content) */
.mdm-btn-auto {
  width: auto;
}


/* ==========================================
   ICON BUTTONS
   ========================================== */

/* Button with icon */
.mdm-btn svg,
.mdm-btn img {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* Icon only button (square) */
.mdm-btn-icon {
  padding: 0.75rem;
  aspect-ratio: 1;
  border-radius: 8px;
}

.mdm-btn-icon.mdm-btn-sm {
  padding: 0.5rem;
}

.mdm-btn-icon.mdm-btn-lg {
  padding: 1rem;
}


/* ==========================================
   BUTTON GROUPS
   ========================================== */

.mdm-btn-group {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Connected buttons (no gap) */
.mdm-btn-group-connected {
  display: inline-flex;
  gap: 0;
}

.mdm-btn-group-connected .mdm-btn {
  border-radius: 0;
}

.mdm-btn-group-connected .mdm-btn:first-child {
  border-radius: 999px 0 0 999px;
}

.mdm-btn-group-connected .mdm-btn:last-child {
  border-radius: 0 999px 999px 0;
}

.mdm-btn-group-connected .mdm-btn:not(:last-child) {
  border-right: none;
}


/* ==========================================
   LOADING STATE
   ========================================== */

.mdm-btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.mdm-btn-loading::after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: mdm-btn-spin 0.6s linear infinite;
}

@keyframes mdm-btn-spin {
  to { transform: rotate(360deg); }
}


/* ==========================================
   RESPONSIVE MODIFIERS
   ========================================== */

/* Full width on mobile */
@media (max-width: 767px) {
  .mdm-btn-block-mobile {
    display: flex;
    width: 100%;
  }
}

/* Stack buttons vertically on mobile */
@media (max-width: 767px) {
  .mdm-btn-group-mobile-stack {
    flex-direction: column;
    width: 100%;
  }
  
  .mdm-btn-group-mobile-stack .mdm-btn {
    width: 100%;
  }
}


/* ==========================================
   ACCESSIBILITY
   ========================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mdm-btn {
    border-width: 3px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mdm-btn,
  .mdm-btn-loading::after {
    transition: none;
    animation: none;
  }
  
  .mdm-btn:hover {
    transform: none;
  }
}


/* ==========================================
   EXAMPLES & USAGE GUIDE
   ========================================== */

/*
BASIC USAGE:
<a href="#" class="mdm-btn mdm-btn-primary">Click Me</a>

VARIANTS:
mdm-btn-primary          Orange solid (main CTA)
mdm-btn-secondary        Navy solid
mdm-btn-outline          Orange outline
mdm-btn-outline-secondary Navy outline
mdm-btn-outline-white    White outline (dark backgrounds)
mdm-btn-text             Text/link style
mdm-btn-light            Light gray
mdm-btn-success          Green
mdm-btn-danger           Red

SIZES:
mdm-btn-xs               Extra small
mdm-btn-sm               Small
(default)                Medium
mdm-btn-lg               Large
mdm-btn-xl               Extra large

SHAPES:
(default)                Pill/rounded
mdm-btn-rounded          Rounded corners
mdm-btn-square           Slight rounding
mdm-btn-sharp            No rounding

WIDTH:
mdm-btn-block            Full width
mdm-btn-block-mobile     Full width on mobile only

SPECIAL:
mdm-btn-icon             Icon-only button
mdm-btn-loading          Loading spinner state
disabled / .disabled     Disabled state

COMBINATIONS:
<a class="mdm-btn mdm-btn-primary mdm-btn-lg">Large Primary</a>
<a class="mdm-btn mdm-btn-outline mdm-btn-sm mdm-btn-square">Small Outline Square</a>
<button class="mdm-btn mdm-btn-secondary mdm-btn-block-mobile">Responsive Button</button>

WITH ICONS:
<a class="mdm-btn mdm-btn-primary">
  <svg>...</svg>
  Click Me
</a>

BUTTON GROUPS:
<div class="mdm-btn-group">
  <a class="mdm-btn mdm-btn-primary">Button 1</a>
  <a class="mdm-btn mdm-btn-outline">Button 2</a>
</div>

CHANGELOG:
- 2025-01-09: Initial button system creation
- 2025-01-09: All variants, sizes, and modifiers

TODO:
- Add dark mode variants
- Consider animated button variants
- Add badge/notification dot option
*/