/*
  The Sign in with Atheron button, v1 (developers.aton-network.org/brand/atheron-button.css).

  <a class="atheron-signin atheron-signin--dark" href="/auth/atheron">
    <span class="atheron-signin__mark"><img src="https://developers.aton-network.org/brand/atheron-glyph.svg" alt=""></span>
    <span>Sign in with Atheron</span>
  </a>

  Themes: --dark (#0a0a0f), --light (#fff), --auto (follows the reader's colour scheme).
  Sizes: --sm (32 px, dense toolbars only), the default (40 px), --lg (48 px, touch screens).
  Labels in five languages: /brand/labels.json. Right-to-left pages (ur-IN) mirror on their own.
  Rules: developers.aton-network.org/docs/branding.
*/

.atheron-signin {
  --atheron-bg: #0a0a0f;
  --atheron-ink: #ffffff;
  --atheron-edge: #2a2a3a;
  --atheron-tile: transparent;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  min-width: 200px;
  padding-inline: 12px 16px;
  border: 1px solid var(--atheron-edge);
  border-radius: 8px;
  background: var(--atheron-bg);
  color: var(--atheron-ink);
  font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Naskh Arabic", sans-serif;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.atheron-signin:hover { text-decoration: none; filter: brightness(1.08); }
.atheron-signin:active { filter: brightness(0.96); }
.atheron-signin:focus-visible { outline: 2px solid #b25cff; outline-offset: 2px; }
.atheron-signin[disabled], .atheron-signin[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; filter: none; }

/* The mark keeps its own colours. On a light button it sits on a small dark tile so its silver reads. */
.atheron-signin__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--atheron-tile);
}
.atheron-signin__mark img, .atheron-signin__mark svg { display: block; width: 20px; height: 20px; }

.atheron-signin--dark { --atheron-bg: #0a0a0f; --atheron-ink: #ffffff; --atheron-edge: #2a2a3a; --atheron-tile: transparent; }
.atheron-signin--light { --atheron-bg: #ffffff; --atheron-ink: #0a0a0f; --atheron-edge: #c9c9d4; --atheron-tile: #0a0a0f; }
@media (prefers-color-scheme: light) {
  .atheron-signin--auto { --atheron-bg: #ffffff; --atheron-ink: #0a0a0f; --atheron-edge: #c9c9d4; --atheron-tile: #0a0a0f; }
}

.atheron-signin--sm { height: 32px; min-width: 168px; gap: 8px; padding-inline: 9px 12px; font-size: 13px; border-radius: 6px; }
.atheron-signin--sm .atheron-signin__mark { width: 20px; height: 20px; border-radius: 5px; }
.atheron-signin--sm .atheron-signin__mark img, .atheron-signin--sm .atheron-signin__mark svg { width: 16px; height: 16px; }

.atheron-signin--lg { height: 48px; min-width: 240px; gap: 12px; padding-inline: 14px 20px; font-size: 17px; border-radius: 10px; }
.atheron-signin--lg .atheron-signin__mark { width: 28px; height: 28px; border-radius: 7px; }
.atheron-signin--lg .atheron-signin__mark img, .atheron-signin--lg .atheron-signin__mark svg { width: 24px; height: 24px; }

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