/* ================================================================
   Satoshi font + 508 / WCAG 2.1 AA accessibility overlay
   dragonfly.drupl.ai -- injected into all static pages
   ================================================================ */

/* Font declarations */
@font-face {
  font-family: 'Satoshi';
  font-weight: 100 900;
  font-style: normal;
  src: url('/fonts/Satoshi-Variable.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  font-weight: 500;
  font-style: normal;
  src: url('/fonts/Satoshi-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  font-weight: 700;
  font-style: normal;
  src: url('/fonts/Satoshi-Bold.woff2') format('woff2');
  font-display: swap;
}

/* Base font size increase (~10% larger than default 16px: 1rem = 17.6px) */
html {
  font-size: 110% !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Apply Satoshi everywhere */
*,
*::before,
*::after {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif !important;
}

/* Keep monospace for code/mono elements */
pre, code, kbd, samp,
.font-mono,
[class*="font-mono"] {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace,
               'SF Mono', Menlo, monospace !important;
}

/* Minimum readable size for micro-labels (text-xs + uppercase overlines) */
.text-xs,
[class*="tracking-widest"],
[class*="uppercase"] {
  font-size: max(0.8125rem, 13px) !important;
}

/* Colour contrast fix: #2563EB on #0A0C14 = 3.84:1 (fails AA for normal text)
   Override to #4A89FF = 5.88:1 (passes AA). */
[style*="color:#2563EB"],
[style*="color: #2563EB"] {
  color: #4A89FF !important;
}

/* Keep border colours consistent with the lighter blue */
[style*="borderColor:rgba(37,99,235"],
[style*="border-color:rgba(37,99,235"] {
  border-color: rgba(74, 137, 255, 0.35) !important;
}

/* Focus indicators -- 508 requires visible keyboard focus */
:focus-visible {
  outline: 3px solid #4A89FF !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Skip-navigation: visible on focus even before HTML is updated */
body > a[href="#main-content"]:focus {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 12px 20px;
  background: #4A89FF;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}

/* Minimum touch/click target sizes (508 / WCAG 2.5.5) */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"] {
  min-height: 44px;
  min-width: 44px;
}

nav a,
header a {
  min-height: 36px;
}

/* Line height for readability (WCAG 1.4.12) */
p, li, dd, dt, label {
  line-height: 1.6 !important;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High-contrast mode: lift muted text */
@media (prefers-contrast: high) {
  [style*="color:#9490AD"],
  [style*="color: #9490AD"] {
    color: #BEB9D4 !important;
  }
}