/* primitives.css — shared component classes (public + staff). Tokens only. */

/* Buttons: ink-primary / ghost-secondary / quiet-tertiary. Teal is NOT a fill.
   Feel model: hover is a COLOUR change, never a lift — a button that levitates
   reads as decoration, a button that fills reads as a control. The press is a
   separate state that REVERSES the hover's direction (back to full ink) plus a
   small scale, because a direction change is what registers as tactile. Press
   is fast (60ms) and release is slow (--im-dur), which is what gives it mass. */
.im-btn{display:inline-flex;align-items:center;gap:var(--im-space-2);
  min-height:44px;padding:12px 22px;border-radius:var(--im-radius-control);
  font-family:var(--im-font-body);font-weight:600;font-size:14px;line-height:1;
  text-decoration:none;border:1px solid var(--im-ink);
  background:var(--im-ink);color:var(--im-paper);cursor:pointer;
  transition:background-color var(--im-dur) var(--im-ease),
             border-color var(--im-dur) var(--im-ease),
             color var(--im-dur) var(--im-ease),
             opacity var(--im-dur) var(--im-ease),
             transform var(--im-dur) var(--im-ease);}
.im-btn:hover{background:var(--im-ink-soft);border-color:var(--im-ink-soft);color:var(--im-paper);}
.im-btn:active{background:var(--im-ink);border-color:var(--im-ink);
  transform:scale(.975);transition-duration:60ms;}
.im-btn:focus-visible{outline:2px solid var(--im-accent-200);outline-offset:2px;}

/* Secondary — inverts on hover. */
.im-btn--ghost{background:transparent;color:var(--im-ink);border-color:var(--im-ink);}
.im-btn--ghost:hover{background:var(--im-ink);border-color:var(--im-ink);color:var(--im-paper);}
.im-btn--ghost:active{background:var(--im-ink-soft);border-color:var(--im-ink-soft);color:var(--im-paper);}

/* Tertiary — a hairline that resolves. No fill, for the third action in a group. */
.im-btn--quiet{background:transparent;color:var(--im-ink);border-color:var(--im-hairline);}
.im-btn--quiet:hover{background:transparent;border-color:var(--im-ink);color:var(--im-ink);}
.im-btn--quiet:active{background:var(--im-band);border-color:var(--im-ink);color:var(--im-ink);}

.im-btn:disabled,.im-btn[disabled],.im-btn[aria-disabled="true"]{
  background:var(--im-stone-200);border-color:var(--im-stone-200);color:var(--im-text-muted);
  cursor:not-allowed;transform:none;}

.im-btn--sm{min-height:36px;padding:8px 14px;font-size:12.5px;}
.im-btn--block{width:100%;justify-content:center;}

/* The ONE card (replaces the 8 legacy variants; used on editorial pages in A). */
.im-card{display:block;background:var(--im-card-bg);border:1px solid var(--im-hairline);
  border-radius:var(--im-radius-card);padding:var(--im-space-8) var(--im-space-8) var(--im-space-10);
  text-decoration:none;color:var(--im-text-100);
  transition:transform var(--im-dur) var(--im-ease),box-shadow var(--im-dur) var(--im-ease),border-color var(--im-dur) var(--im-ease);}
.im-card:hover{transform:translateY(-2px);box-shadow:var(--im-shadow-1);border-color:var(--im-ink);}
.im-card:focus-visible{outline:2px solid var(--im-accent-200);outline-offset:2px;}
.im-card__kicker{font-family:var(--im-font-display);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--im-accent-200);margin-bottom:var(--im-space-3);}
.im-card__title{font-family:var(--im-font-display);font-weight:700;font-size:27px;line-height:1.12;margin:0 0 var(--im-space-3);}
.im-card__body{font-family:var(--im-font-body);font-size:13.5px;line-height:1.5;color:var(--im-text-muted);margin:0 0 var(--im-space-3);}
.im-card__link{font-family:var(--im-font-display);font-weight:600;font-size:13px;
  color:var(--im-ink);text-decoration:none;border-bottom:1px solid var(--im-accent-200);padding-bottom:2px;}

/* Badge */
.im-badge{display:inline-flex;align-items:center;font-family:var(--im-font-display);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--im-radius-pill);
  background:var(--im-band);color:var(--im-text-200);}
@media (prefers-reduced-motion: reduce){
  .im-btn,.im-card{transition:none;}
  .im-btn:active{transform:none;}   /* colour still carries the press */
}

/* Destination flag roundel. Sized by width/height attributes at the call site,
   because the same mark appears at 16px in the footer and 48px on a card.
   The vendored circle-flags SVGs are circular with transparent corners, so no
   radius or clip is needed here. `vertical-align` is what stops it riding the
   text baseline in an inline run; flex call sites ignore it. */
.im-flag{display:inline-block;vertical-align:-.15em;flex:0 0 auto;}