/* Buttons: combine .btn with one variant and optionally one size, e.g.
   class="btn btn-primary btn-sm". Every button uses the same padding and
   radius; sizes only change the font size. Variants use brand tokens, and
   hovers darken the variant's brand color by 15%. */
.btn, .btn-file::file-selector-button {
  --btn-color: var(--color-primary);
  display: inline-block;
  padding: 1rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

/* Filled variants */
.btn-primary, .btn-cta, .btn-danger {
  background-color: var(--btn-color);
  border-color: var(--btn-color);
  color: var(--color-paper);
}
@media (hover: hover) {
  .btn-primary:hover, .btn-cta:hover, .btn-danger:hover {
    background-color: color-mix(in srgb, var(--btn-color) 85%, black);
    border-color: color-mix(in srgb, var(--btn-color) 85%, black);
  }
}
.btn-primary { --btn-color: var(--color-primary); }
.btn-cta     { --btn-color: var(--color-cta); }
.btn-danger  { --btn-color: var(--color-danger); }

/* Outlined variants: paper background, brand-colored text and border */
.btn-outline, .btn-danger-outline {
  background-color: var(--color-paper);
  border-color: var(--btn-color);
  color: var(--btn-color);
}
@media (hover: hover) {
  .btn-outline:hover, .btn-danger-outline:hover {
    border-color: color-mix(in srgb, var(--btn-color) 85%, black);
    color: color-mix(in srgb, var(--btn-color) 85%, black);
  }
}
.btn-outline        { --btn-color: var(--color-primary); }
.btn-danger-outline { --btn-color: var(--color-danger); }

/* Secondary: neutral paper button with ink text and a muted border */
.btn-secondary, .btn-file::file-selector-button {
  background-color: var(--color-paper);
  border-color: var(--color-text-muted);
  color: var(--color-ink);
}
@media (hover: hover) {
  .btn-secondary:hover, .btn-file::file-selector-button:hover {
    background-color: color-mix(in srgb, var(--color-paper) 85%, black);
  }
}

.btn-nav {
  border: none;
  padding: .75rem 1rem;
}

/* Sizes (default is base text) */
.btn-sm {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.btn-lg {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}

/* File inputs: put .btn-file on the <input type="file"> itself. Its native
   "Choose files" button gets the base + secondary button styles, and the
   selected-file text stays beside it. */
.btn-file {
  display: block;
  width: 100%;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-text-muted);
}
.btn-file::file-selector-button {
  margin-right: 1rem;
}