/* ──────────────────────────────────────────────────────────────────────────
   Abelssoft — base element styles + reusable interaction utilities.
   Kept minimal: sets the brand font + canvas, and the micro-interaction
   helpers (.press / .lift / spinners / fades) used across components.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  font-family: var(--font-sans);
  color: var(--text-heading);
}

body {
  font-family: var(--font-sans);
  background: var(--surface-page);
  color: var(--text-heading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--abel-blue); color: #fff; }
.num-tabular { font-variant-numeric: tabular-nums; }

/* ---- Press / lift micro-interactions ---- */
.press { transition: transform var(--dur-fast) ease; }
.press:active { transform: scale(0.97); }
.lift { transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease; }
.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* ---- Keyframes ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes abel-fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes abel-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
  @keyframes abel-spin { to { transform: rotate(360deg); } }
  @keyframes abel-pulseRing { 0% { box-shadow: 0 0 0 0 rgba(204,31,31,.32); } 70% { box-shadow: 0 0 0 10px rgba(204,31,31,0); } 100% { box-shadow: 0 0 0 0 rgba(204,31,31,0); } }
  .anim-fadeUp { animation: abel-fadeUp var(--dur-slower) var(--ease-out) both; }
  .anim-pop { animation: abel-pop var(--dur-slow) var(--ease-pop) both; }
  .anim-spin { animation: abel-spin .7s linear infinite; }
  .cta-pulse:not(:disabled):hover { animation: abel-pulseRing 1.1s; }
}