/* Hand-drawn, inked buttons shared by every page.
 *
 *   <a class="ink-btn ink-btn--primary">   tomato, the main action
 *   <a class="ink-btn ink-btn--secondary"> sage
 *   <a class="ink-btn ink-btn--outline">   paper with a light border
 *   add ink-btn--small for tight spots such as the navigation
 *
 * Uneven border widths, wobbly radii and a slight tilt make each button look
 * drawn; the hard offset shadow presses in on tap. Pages set the width. */
.ink-btn {
  --ink-btn-ink: #3d2817;
  --ink-btn-primary-bg: #c8553d;
  --ink-btn-primary-text: #fbf6ec;
  --ink-btn-secondary-bg: #dde4cc;
  --ink-btn-secondary-text: #2c3823;
  --ink-btn-outline-border: #c4a982;
  --ink-btn-outline-text: #c8553d;
  --ink-btn-focus: #c8553d;
  --ink-btn-shadow: 2.5px 3px;
  --ink-btn-shadow-hover: 3.5px 4px;

  display: inline-block;
  box-sizing: border-box;
  border: 2px solid var(--ink-btn-ink);
  padding: 0.875rem 1.375rem;
  color: var(--ink-btn-ink);
  background: transparent;
  font: 700 1rem 'DM Sans', system-ui, -apple-system, sans-serif;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ink-btn-shadow) 0 var(--ink-btn-ink);
  transition: transform 0.12s cubic-bezier(0.2, 0, 0.1, 1), box-shadow 0.12s ease;
}

:root[data-theme="dark"] .ink-btn {
  --ink-btn-ink: #f6ece1;
  --ink-btn-primary-bg: #eb624c;
  --ink-btn-primary-text: #1b1613;
  --ink-btn-secondary-bg: #97a87e;
  --ink-btn-secondary-text: #1b1613;
  --ink-btn-outline-border: #45372d;
  --ink-btn-outline-text: #eb624c;
  --ink-btn-focus: #eb624c;
}

.ink-btn:hover {
  transform: scale(1.02) rotate(0deg);
  box-shadow: var(--ink-btn-shadow-hover) 0 var(--ink-btn-ink);
}
.ink-btn:active {
  transform: translate(2px, 2.5px) rotate(0deg);
  box-shadow: 0.5px 0.5px 0 var(--ink-btn-ink);
}
.ink-btn:focus-visible {
  outline: 3px solid var(--ink-btn-focus);
  outline-offset: 3px;
}

.ink-btn--primary {
  color: var(--ink-btn-primary-text);
  background: var(--ink-btn-primary-bg);
  border-width: 2.2px 1.8px 2.6px 1.9px;
  border-radius: 255px 18px 225px 22px / 20px 225px 18px 255px;
  transform: rotate(-0.6deg);
}
.ink-btn--secondary {
  color: var(--ink-btn-secondary-text);
  background: var(--ink-btn-secondary-bg);
  border-width: 1.8px 2.4px 2.1px 2.6px;
  border-radius: 20px 240px 18px 230px / 235px 22px 245px 19px;
  transform: rotate(0.5deg);
}
.ink-btn--outline {
  color: var(--ink-btn-outline-text);
  border-color: var(--ink-btn-outline-border);
  border-width: 1.8px 2.2px 2px 1.7px;
  border-radius: 230px 20px 245px 19px / 22px 235px 20px 240px;
  box-shadow: 1.5px 2px 0 var(--ink-btn-outline-border);
  transform: rotate(-0.3deg);
}
.ink-btn--outline:hover {
  border-color: var(--ink-btn-outline-text);
  box-shadow: 2px 2.5px 0 var(--ink-btn-outline-text);
}

.ink-btn--small {
  --ink-btn-shadow: 2px 2.5px;
  --ink-btn-shadow-hover: 2.5px 3px;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
}

@media (prefers-reduced-motion: reduce) {
  .ink-btn,
  .ink-btn:hover,
  .ink-btn:active {
    transform: none;
    transition: none;
  }
}