.ws-card {
  background: var(--background-elevated);
  color: var(--label-normal);
  box-sizing: border-box;
  transition: box-shadow var(--duration-normal) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard),
              border-color var(--duration-normal) var(--ease-standard);
}
.ws-card--border { border: 1px solid var(--line-neutral); }
.ws-card--flat   { border: 1px solid transparent; background: var(--background-normal-alternative); }
.ws-card--raised { border: 1px solid transparent; box-shadow: var(--shadow-2); }
.ws-card--floating { border: 1px solid transparent; box-shadow: var(--shadow-4); }

.ws-card--interactive { cursor: pointer; }
.ws-card--interactive:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); border-color: transparent; }
.ws-card--interactive:active { transform: translateY(0); box-shadow: var(--shadow-2); }