/* The Gufo — design tokens and the button system (implementation prompts v1.2 §1).
   Imported before site.css. No component may define its own button colours, padding or radius. */

:root{
  /* brand */
  --gufo-red:#AC2C3D;        /* confirmed: dominant red on the old site and the one used in the article PDF */
  --gufo-red-hover:#8A1F2E;  /* the old site's own hover value */
  --gufo-ink:#1D1D23;
  --gufo-ink-hover:#2C2C35;

  --r-btn:6px;
  --r-field:8px;
  --r-card:8px;
  --r-pill:999px;

  --btn-h-s:36px;
  --btn-h-m:40px;
  --btn-h-l:48px;

  --header-h:64px;
  --container:1200px;
  --measure:860px;      /* long-form text max width */
  --section-y:96px;
  --section-y-mobile:56px;

  --shadow-card:0 1px 2px rgba(0,0,0,.06);
  --shadow-pop:0 8px 24px rgba(0,0,0,.12);

  /* the share mark's original colour, kept as a variant (prompts v1.2 §2) */
  --gufo-share-blue:#2B3A9C;

  /* focus ring — one value, used by every interactive element */
  --focus-ring:0 0 0 3px rgba(172,44,61,.35);
}
@media (pointer:coarse){
  :root{ --btn-h-s:40px; --btn-h-m:44px; --btn-h-l:52px; }
}

/* ---------- buttons: four roles, three sizes, one hover behaviour ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--btn-h-m); padding:0 18px;
  border:1px solid transparent; border-radius:var(--r-btn);
  font-family:inherit; font-size:14px; font-weight:500; line-height:1;
  text-align:center; text-decoration:none; white-space:nowrap; cursor:pointer;
  background:transparent; color:var(--gufo-ink);
  transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

/* the single main action on a view */
.btn-primary{ background:var(--gufo-red); color:#fff; }
.btn-primary:hover{ background:var(--gufo-red-hover); color:#fff; }

/* supporting actions */
.btn-secondary{ background:var(--gufo-ink); color:#fff; }
.btn-secondary:hover{ background:var(--gufo-ink-hover); color:#fff; }

/* low emphasis */
.btn-outline{ background:transparent; color:var(--gufo-ink); border-color:var(--gufo-ink); }
.btn-outline:hover{ background:var(--gufo-ink); color:#fff; }

/* inline actions — no box, trailing arrow */
.btn-ghost{ background:transparent; color:var(--gufo-ink); padding:0 4px; height:auto; }
.btn-ghost:hover{ background:transparent; color:var(--gufo-red); }
.btn-ghost::after{ content:"→"; font-size:1.05em; line-height:1; transition:none; }

/* sizes S / M / L only */
.btn-s{ height:var(--btn-h-s); padding:0 14px; font-size:13px; }
.btn-m{ height:var(--btn-h-m); }
.btn-l{ height:var(--btn-h-l); padding:0 24px; font-size:15px; }
.btn-ghost.btn-s,.btn-ghost.btn-m,.btn-ghost.btn-l{ height:auto; padding:0 4px; }

.btn-block{ display:flex; width:100%; }

.btn[disabled],.btn:disabled,.btn.is-disabled{ opacity:.45; pointer-events:none; }

/* on dark surfaces the outline role inverts; it is the same role, not a fifth one */
.on-dark .btn-outline{ color:#fff; border-color:rgba(255,255,255,.55); }
.on-dark .btn-outline:hover{ background:#fff; color:var(--gufo-ink); }
.on-dark .btn-ghost{ color:#fff; }
.on-dark .btn-ghost:hover{ color:#fff; opacity:.8; }

/* ---------- brand marks ---------- */

.icon{ display:inline-block; width:1em; height:1em; vertical-align:-.125em; fill:currentColor; flex:none; }
.icon svg{ display:block; width:100%; height:100%; fill:currentColor; }
.icon-brand{ color:var(--gufo-share-blue); }   /* the share mark in its original #2B3A9C */