/*
 * Sign in with Avonao ID: button kit stylesheet (v1).
 * Self-contained: no framework, no JavaScript, no fonts or images loaded from here. Spec: runtime/avonao-id/docs/08-business-api.md.
 *
 *   <a class="avid-btn avid-btn--md avid-btn--dark" href="/api/auth/avonao/start">
 *     <img class="avid-btn__icon" src="avonao-id-icon-128.png" alt="" width="20" height="20">
 *     <span>Sign in with Avonao ID</span>
 *   </a>
 *
 * Themes:  avid-btn--dark (default; for light pages), avid-btn--light (for dark pages), avid-btn--outline (takes the text colour of the page)
 * Sizes:   avid-btn--sm (32 px), avid-btn--md (40 px, default), avid-btn--lg (48 px)
 * Options: avid-btn--icon (icon-only square: give it aria-label and leave out the <span>), avid-btn--pill (fully rounded)
 *
 * Tokens you may set on the button or on any ancestor (for example :root): --avid-btn-bg, --avid-btn-fg, --avid-btn-border,
 * --avid-btn-bg-hover, --avid-btn-focus, --avid-btn-radius (default 8px; 9999px for a pill) and --avid-btn-font (default: system
 * font stack; set it to your site's font stack to match your page). Keep contrast at 4.5:1 for the label and 3:1 for the border
 * and the focus ring. Do not recolour, rotate or crop the pigeon.
 */

.avid-btn {
  /* size (md is the default) */
  --_h: 40px;
  --_icon: 20px;
  --_fs: 15px;
  --_px: 16px;
  --_gap: 10px;
  --_minw: 220px;
  /* theme (dark is the default); the public tokens win when set */
  --_bg: var(--avid-btn-bg, #111111);
  --_fg: var(--avid-btn-fg, #ffffff);
  --_border: var(--avid-btn-border, #111111);
  --_hover: var(--avid-btn-bg-hover, #2a2a2a);

  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_gap);
  height: var(--_h);
  min-width: var(--_minw);
  margin: 0;
  padding: 0 var(--_px);
  border: 1px solid var(--_border);
  border-radius: var(--avid-btn-radius, 8px);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--avid-btn-font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--_fs);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* sizes */
.avid-btn--sm { --_h: 32px; --_icon: 16px; --_fs: 14px; --_px: 12px; --_gap: 8px;  --_minw: 180px; }
.avid-btn--md { --_h: 40px; --_icon: 20px; --_fs: 15px; --_px: 16px; --_gap: 10px; --_minw: 220px; }
.avid-btn--lg { --_h: 48px; --_icon: 24px; --_fs: 16px; --_px: 20px; --_gap: 12px; --_minw: 260px; }

/* themes */
.avid-btn--dark    { --_bg: var(--avid-btn-bg, #111111);       --_fg: var(--avid-btn-fg, #ffffff);        --_border: var(--avid-btn-border, #111111);      --_hover: var(--avid-btn-bg-hover, #2a2a2a); }
.avid-btn--light   { --_bg: var(--avid-btn-bg, #ffffff);       --_fg: var(--avid-btn-fg, #111111);        --_border: var(--avid-btn-border, #d0d0d0);      --_hover: var(--avid-btn-bg-hover, #f4f4f4); }
.avid-btn--outline { --_bg: var(--avid-btn-bg, transparent);   --_fg: var(--avid-btn-fg, currentColor);  --_border: var(--avid-btn-border, currentColor); --_hover: var(--avid-btn-bg-hover, rgba(127, 127, 127, 0.12)); }

/* the pigeon: the Avonao ID icon, left of the label */
.avid-btn__icon {
  display: block;
  flex: none;
  width: var(--_icon);
  height: var(--_icon);
}

/* icon-only: a square of the same height */
.avid-btn--icon {
  width: var(--_h);
  min-width: 0;
  padding: 0;
}

.avid-btn--pill { --avid-btn-radius: 9999px; }

/* states: hover changes only the background; pressed uses the hover background plus a 1 px inset shadow */
.avid-btn:hover { background: var(--_hover); }
.avid-btn:active { background: var(--_hover); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
.avid-btn:focus-visible { outline: 2px solid var(--avid-btn-focus, #2563eb); outline-offset: 2px; }
.avid-btn:focus:not(:focus-visible) { outline: none; }

/* disabled: 50 % opacity, aria-disabled="true". Leave out href on a link so the keyboard cannot follow it either. */
.avid-btn[aria-disabled="true"],
.avid-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* a 44 px touch target without changing the layout: an invisible extension of the hit area */
@media (pointer: coarse) {
  .avid-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* no animation is needed; a short colour fade only for people who have not asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  .avid-btn { transition: background-color 0.12s ease-out; }
}

/* Windows high contrast: keep a visible edge */
@media (forced-colors: active) {
  .avid-btn { border-color: ButtonText; }
  .avid-btn:focus-visible { outline-color: Highlight; }
}