/* Button
   Variants are selected with data-variant, sizes with data-size.
   All colour, radius and type come from tokens.css. */

.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dp-space-2);
  font-family: var(--dp-font-sans);
  font-weight: var(--dp-weight-bold);
  font-size: var(--dp-text-base);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--dp-radius-xs);
  padding: var(--dp-space-2) var(--dp-space-5);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dp-transition),
    border-color var(--dp-transition), color var(--dp-transition),
    box-shadow var(--dp-transition);
}

.dp-btn:focus-visible {
  outline: none;
  box-shadow: var(--dp-shadow-focus);
}

.dp-btn[disabled],
.dp-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Icons sit inline and scale with the text */
.dp-btn svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* ---- Sizes ----------------------------------------------------------- */
.dp-btn[data-size="sm"] {
  font-size: var(--dp-text-sm);
  padding: var(--dp-space-1) var(--dp-space-3);
}

.dp-btn[data-size="lg"] {
  font-size: var(--dp-text-lg);
  padding: var(--dp-space-3) var(--dp-space-6);
}

/* ---- Variants -------------------------------------------------------- */
/* primary (default): brand blue */
.dp-btn,
.dp-btn[data-variant="primary"] {
  background: var(--dp-primary-bg);
  border-color: var(--dp-primary-border);
  color: var(--dp-primary-text);
}

.dp-btn:hover,
.dp-btn[data-variant="primary"]:hover {
  background: var(--dp-primary-bg-hover);
  box-shadow: inset 0 1px 0.75px rgba(255, 255, 255, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

/* cta: brand gold, navy text (the most prominent action) */
.dp-btn[data-variant="cta"] {
  background: var(--dp-cta-bg);
  border-color: var(--dp-cta-border);
  color: var(--dp-cta-text);
}

.dp-btn[data-variant="cta"]:hover {
  background: var(--dp-cta-bg-hover);
  box-shadow: inset 0 1px 0.75px rgba(255, 255, 255, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

/* secondary: navy */
.dp-btn[data-variant="secondary"] {
  background: var(--dp-secondary-bg);
  border-color: var(--dp-secondary-border);
  color: var(--dp-secondary-text);
}

.dp-btn[data-variant="secondary"]:hover {
  background: var(--dp-secondary-bg-hover);
}

/* outline: light surface, neutral border, navy text */
.dp-btn[data-variant="outline"] {
  background: var(--dp-neutral-50);
  border-color: var(--dp-border-neutral);
  color: var(--dp-navy);
}

.dp-btn[data-variant="outline"]:hover {
  border-color: var(--dp-primary-bg);
  color: var(--dp-primary-bg);
}

/* ghost: text only until hovered */
.dp-btn[data-variant="ghost"] {
  background: transparent;
  border-color: transparent;
  color: var(--dp-navy);
}

.dp-btn[data-variant="ghost"]:hover {
  background: var(--dp-surface-soft);
}

/* ai: gradient action for AI features */
.dp-btn[data-variant="ai"] {
  background: var(--dp-gradient-ai, linear-gradient(135deg, #8b5cf6, #3049dc));
  border-color: transparent;
  color: var(--dp-white);
}

.dp-btn[data-variant="ai"]:hover {
  filter: brightness(1.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* danger: destructive action */
.dp-btn[data-variant="danger"] {
  background: var(--dp-danger);
  border-color: var(--dp-danger);
  color: var(--dp-white);
}

.dp-btn[data-variant="danger"]:hover {
  filter: brightness(0.93);
}