/**
 * Antumo Design System - Button Styles
 * Generated from Figma: https://www.figma.com/design/aKIP8PcGfbAMKAZNhEbDOZ/Antumo-|-Design-System?node-id=1-15
 *
 * Dependencies: colors.css, typography.css, effects.css
 */

:root {
  /* ===== Button Size Variables ===== */
  /* Size: sm - 36px height, 12px padding, 4px gap, 14px/20px font */
  --btn-sm-height: 36px;
  --btn-sm-padding-x: var(--spacing-lg);        /* 12px */
  --btn-sm-padding-y: var(--spacing-md);        /* 8px */
  --btn-sm-gap: var(--spacing-xs);              /* 4px */
  --btn-sm-icon-size: var(--icon-size-md);      /* 20px */
  --btn-sm-font-size: var(--font-size-xs);      /* 14px */
  --btn-sm-line-height: var(--line-height-xs);  /* 20px */
  --btn-sm-letter-spacing: var(--button-md-letter-spacing); /* -0.14px */

  /* Size: md - 40px height, 14px padding, 4px gap, 14px/20px font */
  --btn-md-height: 40px;
  --btn-md-padding-x: 14px;                     /* 14px - no matching variable */
  --btn-md-padding-y: 10px;                     /* 10px */
  --btn-md-gap: var(--spacing-xs);              /* 4px */
  --btn-md-icon-size: var(--icon-size-md);      /* 20px */
  --btn-md-font-size: var(--font-size-xs);      /* 14px */
  --btn-md-line-height: var(--line-height-xs);  /* 20px */
  --btn-md-letter-spacing: var(--button-md-letter-spacing); /* -0.14px */

  /* Size: lg - 48px height, 16px padding, 6px gap, 14px/20px font */
  --btn-lg-height: 48px;
  --btn-lg-padding-x: var(--spacing-xl);        /* 16px */
  --btn-lg-padding-y: var(--spacing-lg);        /* 12px */
  --btn-lg-gap: var(--spacing-sm);              /* 6px */
  --btn-lg-icon-size: var(--icon-size-md);      /* 20px */
  --btn-lg-font-size: var(--font-size-xs);      /* 14px */
  --btn-lg-line-height: var(--line-height-xs);  /* 20px */
  --btn-lg-letter-spacing: var(--button-md-letter-spacing); /* -0.14px */

  /* Size: xl - 56px height, 20px padding, 6px gap, 16px/24px font */
  --btn-xl-height: 56px;
  --btn-xl-padding-x: var(--spacing-2xl);       /* 20px */
  --btn-xl-padding-y: var(--spacing-xl);        /* 16px */
  --btn-xl-gap: var(--spacing-sm);              /* 6px */
  --btn-xl-icon-size: var(--icon-size-lg);      /* 24px */
  --btn-xl-font-size: var(--font-size-sm);      /* 16px */
  --btn-xl-line-height: var(--line-height-sm);  /* 24px */
  --btn-xl-letter-spacing: var(--button-lg-letter-spacing); /* -0.16px */

  /* ===== Button Color Variables ===== */
  /* Primary */
  --btn-primary-bg: var(--color-navy-500, #3A3A66);
  --btn-primary-bg-hover: var(--color-navy-600, #32355A);
  --btn-primary-text: var(--color-white, #FFFFFF);
  --btn-primary-border: transparent;

  /* Secondary */
  --btn-secondary-bg: var(--color-white, #FFFFFF);
  --btn-secondary-bg-hover: var(--color-grey-50, #FAFAFA);
  --btn-secondary-text: var(--color-navy-500, #3A3A66);
  --btn-secondary-border: var(--color-grey-300, #D5D7DA);

  /* Tertiary */
  --btn-tertiary-bg: transparent;
  --btn-tertiary-bg-hover: var(--color-grey-50, #FAFAFA);
  --btn-tertiary-text: var(--color-navy-500, #3A3A66);
  --btn-tertiary-border: transparent;

  /* Destructive Primary */
  --btn-destructive-bg: var(--color-red-500, #D14C4C);
  --btn-destructive-bg-hover: var(--color-red-600, #B53F3F);
  --btn-destructive-text: var(--color-white, #FFFFFF);
  --btn-destructive-border: transparent;

  /* Destructive Secondary */
  --btn-destructive-secondary-bg: var(--color-white, #FFFFFF);
  --btn-destructive-secondary-bg-hover: var(--color-red-25, #FEF6F6);
  --btn-destructive-secondary-text: var(--color-red-500, #D14C4C);
  --btn-destructive-secondary-border: var(--color-red-300, #EA8282);

  /* Destructive Tertiary */
  --btn-destructive-tertiary-bg: transparent;
  --btn-destructive-tertiary-bg-hover: var(--color-red-25, #FEF6F6);
  --btn-destructive-tertiary-text: var(--color-red-500, #D14C4C);
  --btn-destructive-tertiary-border: transparent;

  /* Disabled */
  --btn-disabled-bg: var(--color-grey-100, #F5F5F5);
  --btn-disabled-text: var(--color-grey-400, #A4A7AE);
  --btn-disabled-border: var(--color-grey-200, #E9EAEB);
}

/* ===== Base Button Styles ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-brand);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full, 9999px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-focus, #5B4DFF);
}

/* ===== Button Sizes ===== */
.btn-sm {
  height: var(--btn-sm-height);
  padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);
  gap: var(--btn-sm-gap);
  font-size: var(--btn-sm-font-size);
  line-height: var(--btn-sm-line-height);
  letter-spacing: var(--btn-sm-letter-spacing);
}

.btn-md {
  height: var(--btn-md-height);
  padding: var(--btn-md-padding-y) var(--btn-md-padding-x);
  gap: var(--btn-md-gap);
  font-size: var(--btn-md-font-size);
  line-height: var(--btn-md-line-height);
  letter-spacing: var(--btn-md-letter-spacing);
}

.btn-lg {
  height: var(--btn-lg-height);
  padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
  gap: var(--btn-lg-gap);
  font-size: var(--btn-lg-font-size);
  line-height: var(--btn-lg-line-height);
  letter-spacing: var(--btn-lg-letter-spacing);
}

.btn-xl {
  height: var(--btn-xl-height);
  padding: var(--btn-xl-padding-y) var(--btn-xl-padding-x);
  gap: var(--btn-xl-gap);
  font-size: var(--btn-xl-font-size);
  line-height: var(--btn-xl-line-height);
  letter-spacing: var(--btn-xl-letter-spacing);
}

/* ===== Button Hierarchies ===== */
/* Primary */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
}

.btn-primary:hover {
  background-color: var(--btn-primary-bg-hover);
}

/* Secondary */
.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
}

/* Tertiary */
.btn-tertiary {
  background-color: var(--btn-tertiary-bg);
  color: var(--btn-tertiary-text);
  border-color: var(--btn-tertiary-border);
}

.btn-tertiary:hover {
  background-color: var(--btn-tertiary-bg-hover);
}

/* ===== Destructive Buttons ===== */
/* Destructive Primary */
.btn-destructive {
  background-color: var(--btn-destructive-bg);
  color: var(--btn-destructive-text);
  border-color: var(--btn-destructive-border);
}

.btn-destructive:hover {
  background-color: var(--btn-destructive-bg-hover);
}

/* Destructive Secondary */
.btn-destructive-secondary {
  background-color: var(--btn-destructive-secondary-bg);
  color: var(--btn-destructive-secondary-text);
  border-color: var(--btn-destructive-secondary-border);
}

.btn-destructive-secondary:hover {
  background-color: var(--btn-destructive-secondary-bg-hover);
}

/* Destructive Tertiary */
.btn-destructive-tertiary {
  background-color: var(--btn-destructive-tertiary-bg);
  color: var(--btn-destructive-tertiary-text);
  border-color: var(--btn-destructive-tertiary-border);
}

.btn-destructive-tertiary:hover {
  background-color: var(--btn-destructive-tertiary-bg-hover);
}

/* ===== Button States ===== */
/* Disabled */
.btn:disabled,
.btn.btn-disabled {
  background-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  border-color: var(--btn-disabled-border);
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading */
.btn.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spinner 0.75s linear infinite;
}

.btn-primary.btn-loading::after {
  border-color: var(--btn-primary-text);
  border-right-color: transparent;
}

.btn-secondary.btn-loading::after,
.btn-tertiary.btn-loading::after {
  border-color: var(--btn-secondary-text);
  border-right-color: transparent;
}

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

/* ===== Icon Only Buttons ===== */
.btn-icon {
  padding: 0;
  aspect-ratio: 1;
}

.btn-icon.btn-sm {
  width: var(--btn-sm-height);
  height: var(--btn-sm-height);
}

.btn-icon.btn-md {
  width: var(--btn-md-height);
  height: var(--btn-md-height);
}

.btn-icon.btn-lg {
  width: var(--btn-lg-height);
  height: var(--btn-lg-height);
}

.btn-icon.btn-xl {
  width: var(--btn-xl-height);
  height: var(--btn-xl-height);
}

/* ===== Button Icons ===== */
.btn-icon-leading,
.btn-icon-trailing,
.btn-icon-element {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-sm .btn-icon-leading,
.btn-sm .btn-icon-trailing,
.btn-sm .btn-icon-element {
  width: var(--btn-sm-icon-size);
  height: var(--btn-sm-icon-size);
}

.btn-md .btn-icon-leading,
.btn-md .btn-icon-trailing,
.btn-md .btn-icon-element {
  width: var(--btn-md-icon-size);
  height: var(--btn-md-icon-size);
}

.btn-lg .btn-icon-leading,
.btn-lg .btn-icon-trailing,
.btn-lg .btn-icon-element {
  width: var(--btn-lg-icon-size);
  height: var(--btn-lg-icon-size);
}

.btn-xl .btn-icon-leading,
.btn-xl .btn-icon-trailing,
.btn-xl .btn-icon-element {
  width: var(--btn-xl-icon-size);
  height: var(--btn-xl-icon-size);
}

/* ===== Close Button (X) ===== */
.btn-close {
  background-color: transparent;
  color: var(--color-grey-500, #717680);
  border: none;
  border-radius: var(--radius-md, 8px);
}

.btn-close:hover {
  background-color: var(--color-grey-100, #F5F5F5);
  color: var(--color-grey-700, #414651);
}

.btn-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-focus, #5B4DFF);
}

/* ===== Dark Mode Button Overrides ===== */
[data-theme="dark"] .btn-primary {
  background-color: var(--color-navy-400);
}

[data-theme="dark"] .btn-primary:hover {
  background-color: var(--color-navy-300);
}

[data-theme="dark"] .btn-secondary {
  background-color: var(--color-bg-secondary);
  color: var(--color-white);
  border-color: var(--color-border-primary);
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] .btn-tertiary {
  color: var(--color-text-primary);
}

[data-theme="dark"] .btn-tertiary:hover {
  background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] .btn-destructive-secondary {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-red-400);
}

[data-theme="dark"] .btn-destructive-secondary:hover {
  background-color: var(--color-red-900);
}

[data-theme="dark"] .btn-destructive-tertiary:hover {
  background-color: var(--color-red-900);
}

[data-theme="dark"] .btn-close {
  color: var(--color-grey-400);
}

[data-theme="dark"] .btn-close:hover {
  background-color: var(--color-grey-800);
  color: var(--color-grey-200);
}