/* Vackya Design System — global entry. Consumers link this one file. */
@import "./tokens/fonts.css";
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/radius.css";
@import "./tokens/elevation.css";

/* ---------------------------------------------------------------------------
   Global hover interaction — a clear lift + zoom and a bold black outline ring
   on every info box and every button, site-wide, with no per-component wiring.
   Cards = anything using the {radius-xl} corner token. Buttons = every <button>
   except the 3D voice-ring panels (which are animation-driven).
   Opt out with class "vk-static" (e.g. the contact-modal shell).
--------------------------------------------------------------------------- */

/* ---- info boxes ---- */
[style*="radius-xl"]:not(.vk-static) {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms ease, outline-color 150ms ease !important;
  outline: 2px solid transparent;
  outline-offset: 5px;
}
/* lift the box only when the box itself is hovered — not when the pointer is
   over an inner button (then just the button animates). z-index keeps the
   enlarged card above its neighbours. */
[style*="radius-xl"]:not(.vk-static):hover:not(:has(button:hover)) {
  transform: translateY(-6px) scale(1.02);
  outline-color: rgba(12, 10, 9, 0.35);
  box-shadow: 0 20px 42px rgba(12, 10, 9, 0.16) !important;
  position: relative;
  z-index: 5;
}

/* ---- every button (except the 3D ring panels) ---- */
button:not([data-vid]):not(.vk-static) {
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
              background 140ms ease, border-color 140ms ease,
              box-shadow 180ms ease, outline-color 150ms ease !important;
  outline: 2px solid transparent;
  outline-offset: 3px;
}
button:not([data-vid]):not(.vk-static):hover {
  transform: translateY(-2px) scale(1.06);
  outline-color: rgba(12, 10, 9, 0.35);
  position: relative;
  z-index: 5;
}
/* pill / circular buttons also get a drop shadow; text-style buttons don't
   (a floating shadow under a bare text link looks odd). */
button[style*="radius-pill"]:not([data-vid]):hover,
button[style*="9999px"]:not([data-vid]):hover {
  box-shadow: 0 12px 26px rgba(12, 10, 9, 0.22) !important;
}
button:not([data-vid]):not(.vk-static):active {
  transform: translateY(0) scale(0.97);
}

/* Respect users who prefer reduced motion — keep the outline, drop the motion. */
@media (prefers-reduced-motion: reduce) {
  [style*="radius-xl"]:not(.vk-static):hover:not(:has(button:hover)),
  button:not([data-vid]):not(.vk-static):hover,
  button:not([data-vid]):not(.vk-static):active { transform: none; }
}