@charset "UTF-8";
/* ─────────────────────────────────────────────────────────────
 * UI Components
 * Registered in ui/_index.scss
 * ───────────────────────────────────────────────────────────── */
/* Register every UI element here — explicit order, no glob magic */
/* ─────────────────────────────────────────────────────────────
 * Buttons
 * .btn--light  — white button with purple text (primary)
 * .btn--ghost  — transparent with white outline (secondary)
 * .link-btn    — text-only action
 * ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
 * Mixins & Functions
 * Usage in any partial: @use '../mixins' as *; (or 'mixins' from root)
 * ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
 * Breakpoints (px)
 * Keep in sync with JS defaults (dynamicAdapt / spollers use 767/768)
 * ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
 * Functions
 * ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625em;
  min-height: 3.375rem;
  padding: 0.875em 1.75em;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  border: 0.125rem solid transparent;
  border-radius: var(--radius);
  color: var(--white);
  background-color: transparent;
  transition: transform var(--transition-fast) ease, background-color var(--transition-base) ease, color var(--transition-base) ease, border-color var(--transition-base) ease, box-shadow var(--transition-base) ease, opacity var(--transition-base) ease;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn .icon {
  width: 1.25em;
  height: 1.25em;
}

.btn--light {
  background-color: var(--white);
  color: var(--purple);
  box-shadow: var(--shadow-soft);
}
@media (any-hover: hover) {
  .btn--light:hover:not(:disabled) {
    background-color: #f6eefc;
    box-shadow: 0 1.375rem 3rem rgba(40, 6, 70, 0.36);
  }
}

.btn--ghost {
  border-color: var(--color-line);
  color: var(--white);
}
@media (any-hover: hover) {
  .btn--ghost:hover:not(:disabled) {
    border-color: var(--white);
    background-color: var(--color-surface);
  }
}

.btn--wide {
  width: 100%;
  max-width: 20rem;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  background: none;
  border: 0;
  transition: color var(--transition-base) ease;
}
@media (any-hover: hover) {
  .link-btn:hover {
    color: var(--white);
  }
}

.link-btn .icon {
  width: 1.125em;
  height: 1.125em;
}

/* ─────────────────────────────────────────────────────────────
 * Icon (SVG sprite)
 * Usage: @@include('components/_icon.html', {"name": "arrow-right"})
 * Stroke icons — sized by font-size, colored by text color
 * ───────────────────────────────────────────────────────────── */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentcolor;
}