/* Tesselan – button & link system (proposal). Load AFTER site.css.
   Targets: text >= 4.5:1 (WCAG 1.4.3), control boundary >= 3:1 (1.4.11),
   target >= 44px (2.5.8 AAA-level / Apple HIG), one filled primary per view.
   Contrast figures are against cream #FAF6EF. */

:root {
  /* tokens */
  --btn-primary-bg: #a84f32;
  --btn-primary-bg-hover: #8f4127;
  --btn-primary-bg-active: #8f4127;
  --btn-primary-fg: #ffffff;
  --btn-quiet-fg: #a84f32;          /* on cream 5.09:1 */
  --btn-quiet-border: #a84f32;      /* boundary vs cream 5.09:1 */
  --btn-secondary-fg: #3a2e26;      /* on cream 12.19:1 */
  --btn-secondary-border: #76665a;  /* boundary vs cream 5.11:1 (old #998d7f was 3.01:1) */
  --btn-height: 3rem;               /* 48px, including the header call to action */
  --btn-height-compact: 3rem;
  --btn-font-size: 1rem;            /* was 0.875rem */
  --focus-ring: #3a2e26;            /* 12.19:1 vs cream */
}

/* ---- root-cause fix: `.nav a` (0,1,1) was overriding `.btn` colour (0,1,0) ---- */
.nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: var(--btn-height-compact);
  padding: 0 0.25rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);           /* 5.11:1 */
  text-decoration: none;
  text-underline-offset: 0.3em;
}
.nav a:not(.btn):hover { color: var(--ink); text-decoration: underline; }

/* ---- base button ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--btn-height); min-width: 44px;
  padding: 0 1.75rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 500 var(--btn-font-size)/1.2 var(--sans);
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:focus-visible, .nav a:focus-visible, .footer-inner nav a:focus-visible, .wordmark:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 999px;
}

/* primary: the one filled button per view */
.btn, .btn-primary {
  background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg);
  box-shadow: 0 1px 0 rgba(58,46,38,.14), 0 8px 18px -10px rgba(168,79,50,.65);
}
.btn:hover, .btn-primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); }
.btn:active, .btn-primary:active { background: var(--btn-primary-bg-active); border-color: var(--btn-primary-bg-active); box-shadow: none; }

/* compact: same filled primary at the 44px minimum height (header call-to-action) */
.btn-compact { min-height: var(--btn-height-compact); padding: 0 1.25rem; }

/* secondary: outlined, ink text, strong boundary */
.btn-outline, .btn-secondary {
  background: transparent; color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); box-shadow: none;
}
.btn-outline:hover, .btn-secondary:hover { background: #f1e8da; color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.btn-outline:active, .btn-secondary:active { background: #e9dcc8; border-color: var(--ink); }

/* quiet: header call-to-action, never competes with the hero primary */
.btn-quiet {
  min-height: var(--btn-height-compact); padding: 0 1.25rem;
  background: transparent; color: var(--btn-quiet-fg); border-color: var(--btn-quiet-border); box-shadow: none;
}
.btn-quiet:hover { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); }
.btn-quiet:active { background: var(--btn-primary-bg-active); color: var(--btn-primary-fg); }

/* on a painted or dark surface: cream button, ink text (12.19:1) */
.btn-on-dark { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: none; }
.btn-on-dark:hover { background: var(--paper-deep); border-color: var(--paper-deep); color: var(--ink); }

/* footer & inline links: always underlined so they read as links */
.footer-inner nav a {
  min-height: var(--btn-height-compact); padding: 0 0.25rem; color: var(--ink-soft); font-size: 0.9375rem;
  text-decoration: underline; text-decoration-color: rgba(118,102,90,.5); text-underline-offset: 0.3em;
}
.footer-inner nav a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* header layout: CTA sits beside the wordmark on small screens (no 4-link + button stack) */
.header-inner { gap: 0.25rem 1rem; }
.header-inner .wordmark { margin-right: auto; }
@media (max-width: 40rem) {
  .header-inner .wordmark { order: 1; }
  .header-inner .btn-compact, .header-inner .btn-quiet, .header-inner .header-cta { order: 2; }
  .header-inner .header-cta { width: auto; padding: 0 1rem; min-height: 3rem; }
  .header-inner .nav { order: 3; flex-basis: 100%; gap: 0 0.5rem; }
  .actions .btn { width: 100%; }
}
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }