/* ============================================================
   Tolk — shared base styles
   Replaces the Claude Design runtime (support.js) hover/focus
   attributes with real CSS. No JS framework required.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #FAF6EF; font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ── Hover helpers ─────────────────────────────────────── */
.lnk-dark  { transition: color 150ms ease; }
.lnk-dark:hover  { color: #171412 !important; }

.lnk-light { transition: color 150ms ease; }
.lnk-light:hover { color: #FAF6EF !important; }

.btn-primary { transition: background 150ms ease; }
.btn-primary:hover { background: #A84D2B !important; }

.badge { transition: opacity 150ms ease; }
.badge:hover { opacity: 0.82; }

.legal-body a { transition: border-color 150ms ease; }
.legal-body a:hover { border-bottom-color: #C4603A !important; }

/* ── Language pills ────────────────────────────────────── */
.lang-pill { transition: background 160ms ease, color 160ms ease; }

/* ── Skip link (was style-focus in the export) ─────────── */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; background: #C4603A; color: #fff; padding: 8px 16px; font-family: 'Inter', sans-serif; font-size: 14px; text-decoration: none; }
.skip-link:focus { left: 8px; }

/* ── Nav (scroll state toggled by tiny inline script) ──── */
#site-nav { transition: background 220ms ease, border-color 220ms ease; }

/* ── Keyframes used by the hero / landing animations ───── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.4; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}